这种语法错误我碰到过好多次，大多和模块加载或者语法格式细节有关，咱们一步步来排查：

• 检查HTML中脚本标签的type属性
  如果你在代码里用了ES模块的import/export语法，浏览器默认会把脚本当成普通JS解析，碰到模块语法里的{就会报错。一定要给引用模块的script标签加上type="module"：

  <!-- 错误示例 -->
  <script src="main.js"></script>
  <!-- 正确示例 -->
  <script type="module" src="main.js"></script>
  

  注意：如果module.js是被main.js导入的，不需要单独给它加script标签，只要入口的main.js用了type="module"就行。

• 定位报错行，检查语法细节
  Chrome控制台会告诉你错误发生在第几行，直接去对应文件的那一行附近找问题：

  • 有没有漏写闭合的括号/大括号？比如对象字面量const obj = { name: 'test' 漏了最后的}
  • 是不是把全角的｛当成了半角的{？这种不可见的字符很容易坑人
  • 函数声明、箭头函数的语法有没有写错？比如const func = () => { /* ... */ 漏了闭合的}

• 检查模块导入导出的语法
  如果错误出在模块的导入导出部分，确认语法是否符合ES模块规范：

  // module.js 错误写法：缺少大括号的命名导出
  export myFunc;
  // 正确写法
  export function myFunc() { /* ... */ }
  // 或者
  const myFunc = () => {};
  export { myFunc };
  

  导入的时候也要注意：

  // main.js 错误写法：命名导入漏了大括号
  import myFunc from './module.js';
  // 正确的命名导入
  import { myFunc } from './module.js';
  // 如果是默认导出，才不需要大括号
  import myFunc from './module.js'; // 对应module.js里的 export default myFunc;
  

• 检查文件编码
  极少数情况下，文件编码不对（比如UTF-8带BOM）会导致浏览器解析异常，把代码复制到纯文本编辑器（比如VS Code的纯文本模式）重新保存成UTF-8无BOM格式试试。

先从模块加载的type="module"开始排查，这是最常见的原因。如果还是解决不了，把报错的具体行号和相关代码片段贴出来，能更快定位问题～

内容的提问来源于stack exchange，提问作者I. Gursky