JavaScript模块导入导出报错求助：require未定义及模块未加载问题

问题根源 #

浏览器默认不支持ES模块（import/export）的语法解析，也没有内置CommonJS的require函数，直接使用模块语法会触发报错，导致页面空白。

分步解决方案 #

1. 给HTML中的主脚本添加type="module"属性
   必须显式告诉浏览器当前脚本是ES模块，否则它会按照普通脚本解析，无法识别import语法。修改后的脚本标签示例：

   <script type="module" src="你的主文件名.js"></script>
   

2. 确保Header.js的导出语法正确
   因为你用的是默认导入import Header from "./Header.js"，所以Header.js必须使用默认导出语法：

   // Header.js
   export default function Header() {
     // 这里写你的函数逻辑，比如生成头部DOM
     const headerEl = document.createElement('div');
     headerEl.className = 'header';
     headerEl.innerHTML = '<h1>页面头部</h1>';
     return headerEl;
   }
   

3. 检查导入路径的正确性

   • 路径要和文件实际位置对应，比如主文件和Header.js在同一目录下，./Header.js是正确的
   • 浏览器模块导入必须写完整的后缀名.js，不能省略

4. 用本地服务器打开页面，避免file://协议的跨域问题
   直接双击打开HTML文件会用file://协议，可能触发模块加载的跨域限制。可以用以下方式启动本地服务器：

   • 安装Node.js后，执行npx serve，然后访问控制台给出的本地地址（比如http://localhost:3000）

错误原因说明 #

• require is not defined：浏览器没有CommonJS环境，只有构建工具打包后才会把import转成浏览器能识别的代码，或者通过type="module"启用ES模块支持。
• Module name "Header" has not been loaded yet for context：未启用模块模式时，浏览器无法处理模块的依赖加载逻辑，导致导入失败。

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