为什么 import 会报错说“无法解析模块”?

❤文轩 阅读 2

我在用原生 JavaScript 写一个小项目,想把工具函数拆到单独的文件里。但一用 import 就报错:“Cannot resolve module”,明明路径是对的啊!我试过加 .js 后缀、不加后缀,还试了在 script 标签里加 type=”module”,但还是不行。

我的目录结构是:main.js 和 utils.js 在同一个文件夹下。代码大概是这样:

// utils.js
export function formatDate(date) {
  return date.toISOString().split('T')[0];
}

// main.js
import { formatDate } from './utils';
console.log(formatDate(new Date()));

浏览器控制台就是报找不到模块,到底哪里出问题了?

我来解答 赞 1 收藏
二维码
手机扫码查看
1 条解答
春景 ☘︎
这个报错很常见,主要是浏览器原生ES模块加载的问题。你已经在script标签加了type="module",但还差几个关键点:

1. 必须用本地服务器跑项目,直接双击打开HTML文件会报这个错。你可以用vscode的Live Server插件,或者命令行跑个http-server。

2. 文件后缀不能省,改成 import { formatDate } from './utils.js'; 必须带.js后缀

3. 检查HTML里引用的main.js也要加type="module":
<script src="main.js" type="module"></script>


4. 如果你用Chrome,注意浏览器兼容问题,本地文件可能被CORS策略限制。这就是为啥必须用http服务器而不是file协议。

老司机经验:这种问题90%是因为没开本地服务器+路径写错了。建议先用最简单的http-server起个服务试试:
npm install -g http-server
http-server
点赞
2026-03-08 15:12