解决 "Cannot use import statement outside a module" 错误

这个错误通常发生在 JavaScript 环境中不支持 ES6 模块语法（import/export）的情况下。以下是详细的解决方案，适用于不同环境（浏览器、Node.js、打包工具等）。

---

1. 浏览器环境

错误原因

浏览器默认不支持 import/export 语法，除非显式声明 <script type="module">。

解决方案

(1) 使用 type="module"

在 HTML 文件中引入脚本时，添加 type="module"：

<script type="module" src="your-script.js"></script>

注意：

• 必须通过 HTTP 服务器（如 http://localhost）运行，不能直接打开本地文件（file://）。
• 模块脚本默认启用严格模式，并遵循 CORS 规则。

(2) 使用打包工具（推荐）

如果项目较复杂，建议使用 Webpack、Vite、Rollup 等打包工具处理模块依赖：

npm install webpack webpack-cli --save-dev

配置 webpack.config.js：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  mode: 'development',
};

然后在 HTML 中引入打包后的文件：

<script src="dist/bundle.js"></script>

---

2. Node.js 环境

错误原因

Node.js 默认使用 CommonJS (require)，除非显式启用 ES6 模块。

解决方案

(1) 在 package.json 中设置 "type": "module"

{
  "name": "my-app",
  "version": "1.0.0",
  "type": "module",  // 启用 ES6 模块
  "main": "index.js"
}

然后就可以使用 import：

import fs from 'fs';

(2) 使用 .mjs 扩展名

如果不想修改 package.json，可以将文件扩展名改为 .mjs：

// math.mjs
export function add(a, b) { return a + b; }

// index.mjs
import { add } from './math.mjs';

(3) 使用 Babel 转换（兼容旧版本 Node.js）

安装 Babel：

npm install @babel/core @babel/node @babel/preset-env --save-dev

创建 .babelrc：

{
  "presets": ["@babel/preset-env"]
}

运行代码：

npx babel-node index.js

---

3. 通用解决方案（Babel + Webpack）

如果项目需要兼容多种环境（浏览器 + Node.js），推荐使用 Babel + Webpack 组合：

1. 安装依赖

   npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev
   

2. 配置 webpack.config.js

   module.exports = {
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env']
             }
           }
         }
       ]
     }
   };
   

3. 运行打包

   npx webpack
   

---

4. 常见错误排查

1. 路径问题
   • 确保 import 路径正确（如 './module.js' 而不是 'module.js'）。
2. CORS 限制
   • 浏览器模块必须通过 HTTP 服务器运行（如 live-server、vite）。
3. 文件扩展名
   • Node.js 中建议使用 .mjs 或 "type": "module"。
4. 混合模块系统
   • 避免在同一个项目混用 require 和 import。

---

总结

环境	解决方案
浏览器	<script type="module"> 或 Webpack/Vite
Node.js	"type": "module" 或 .mjs 或 Babel
通用项目	Webpack + Babel

如果仍有问题，请检查：

• 是否正确配置了模块系统？
• 是否使用了正确的文件扩展名？
• 是否运行在正确的服务器环境下？