先说一句：我也不是大学老师， 也不是什么技术大牛，我就是个爱折腾前端的小码农。 试着... 下面这篇文章会把我自己踩过的那些坑儿， 一股脑儿抖出来别说我没提醒你。

一、 最常见的 SyntaxError：Cannot use import statement outside a module

来一波... 这个错误出现的时候，你大概率是这么写HTML：

然后在 main.js 里硬塞了：

import { foo } from './utils.js';
console.log;

后来啊控制台直接炸了：

Uncaught SyntaxError: Cannot use import statement outside a module

原因很简单：浏览器默认把 ⚠️ 小细节： 一定要放在或者 如果你用了 async/await 之类的高级特性，也必须是 module。 太坑了。 别忘了服务器要返回正确的 MIME 类型，否则也会报错。 1.1 “module”写错了怎么办？ 有的小伙伴会写成：，扎心了... 少了引号也会导致解析失败，控制台可能只给出一堆莫名其妙的信息。- 用 VSCode 的 ESLint 插件， 它会帮你捕捉缺失引号、未声明变量等低级错误，也许吧...。 四、 常见的“噪音”错误合集 // // import './src/css/'; // 这行应被移除，CSS应通过HTML 导入 ; // 漏掉 console 或 alert 前缀 const container = ; // 少了 document.getElementById = === 'none' ? 'block' : 'none'; // 左右两边都缺变量名 = toggleContainer;// 把函数直接赋值给 window， 好吧好吧... 却忘记写 window. 五、 & 小技巧 - 每次新建 .js 文件默认加上 // @ts-nocheck // ignore TS 检查 - 开发阶段打开 Chrome DevTools 的 “Disable JavaScript” 再打开看看页面是否还能正常渲染， 闹笑话。 这样可以快速定位是否真的依赖全局变量。 3.1 错误示例 // app.js import './src/css/main.css'; // ❌ 浏览器直接报错，我满足了。 If you try it in Chrome y 我惊呆了。 ou’ll get something like: Uncaught TypeError: Failed to fetch dynamically imported module: http://localhost/src/css/main.css，说到点子上了。 3.2 正确姿势——用 HTML或者构建工具处理

虽然看起来比直接写 onclick 麻烦一点，但长期来看省事儿。 三、别傻傻在 JS 模块里 import CSS！🚫🧩 很多人看到 webpack、 vite 那种“可以直接 import './style.css'” 的示例，以为原生浏览器也能这么玩。其实吧原生 ES Module 不支持导入非 JS 资源。踩雷了。 2.2 推荐做法——用 addEventListener 替代 inline 事件 // index.html 点我 // main.js import { toggleContainer } from './ui.js'; const btn = document.getElementById; if { btn.addEventListener; } 这样既不需要把函数挂到 window，又能保持代码清晰。 2.1 最蠢但最快速的“解决办法”——挂到 window // ui.js function toggleContainer { console.log; } window.toggleContainer = toggleContainer; // 把它扔到全局 注意！这招会污染全局命名空间，项目大了以后容易冲突。记得检查一下属性值是否被引号包住。 二、 全局函数找不到——Uncaught ReferenceError: xxx is not defined 这个错误通常出现在你把一个函数写进了模块里却还想用传统的 inline onclick 调用它： 点我 而 toggleContainer 定义在一个 ES Module 中： // file: ui.js function toggleContainer { console.log; } export { toggleContainer }; 主要原因是模块内部有自己的作用域，除非你显式把函数挂到 window 上，否则页面根本找不到它，何不...。