导入JavaScript模块出现语法错误，请求技术排查支持

嘿，我一眼就看出问题出在哪了——你在ES模块的导出和导入语法上不匹配，这才导致浏览器抛出了这个语法错误。咱们拆解来看：

首先看你的module.js，你用的是默认导出：

export default function myModule() { 
  return new Promise((resolve) => { 
    // do a bunch of stuff 
  }); 
};

默认导出的特点是每个模块只能有一个，导入的时候不需要用花括号包裹。

但你的test.js里却用了命名导入的写法：

import {myModule} from "module"; 
myModule().then((retVal) => { 
  console.log(retVal); 
});

{myModule}这种语法是用来导入模块里用export单独导出的命名成员的，和默认导出完全不匹配，这就是第1行报错的核心原因。

给你两个简单的修正方案，选哪个都可以：

方案一：修改test.js的导入语法（推荐，不用动模块代码） #

把导入语句改成默认导入的形式，去掉花括号：

import myModule from "module"; 
myModule().then((retVal) => { 
  console.log(retVal); 
});

这样就能正确拿到默认导出的myModule函数了。

方案二：修改module.js的导出方式 #

如果你更习惯用命名导入的语法，可以把模块改成命名导出：

export function myModule() { 
  return new Promise((resolve) => { 
    // do a bunch of stuff 
  }); 
};

改完之后，test.js里原来的导入代码就可以正常工作了。

最后补充个小提醒：在浏览器中运行ES模块，一定要确保HTML里的脚本标签加上type="module"属性，比如：

<script type="module" src="test.js"></script>

要是没加这个属性，浏览器会把你的模块脚本当成普通JS解析，也可能触发类似的语法错误哦。

内容的提问来源于stack exchange，提问作者Brinley