简单示例中ES6 Modules无法正常运行的原因是什么？

问题原因 #

• 导入路径不匹配：你在main.mjs中引入依赖时写的路径是./myMod.js，但实际模块文件的名称是myMod.mjs，ES 模块对路径的匹配是严格区分后缀的，路径错误会触发模块加载404报错，后续代码不会执行。
• 导出语法不符合严格模式要求：ES 模块默认启用严格模式，你在myMod.mjs中写的export default x = "message";没有提前声明变量x，直接给未声明变量赋值会抛出ReferenceError，导致模块加载失败。

修正方案 #

1. 修改main.mjs的导入路径 #

// 把后缀从.js改成.mjs，和实际文件名匹配
import x from './myMod.mjs';

const y = x;
document.getElementById('myH1').innerHTML = y;

2. 修改myMod.mjs的导出语法 #

两种写法二选一即可：

// 写法1：直接导出值
export default "message";

// 写法2：先声明变量再导出
const x = "message";
export default x;

修改完成后刷新页面即可正常渲染"message"文本。

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