webpack: "[ERR_REQUIRE_ESM]: Must use import to load ES Module" - 但我用的是 import！

Posted 2023-03-13

【中文标题】webpack: "[ERR_REQUIRE_ESM]: Must use import to load ES Module" - 但我用的是 import！

【英文标题】：webpack: "[ERR_REQUIRE_ESM]: Must use import to load ES Module" - But I AM using import！

【发布时间】：2021-03-25 19:10:31

【问题描述】：

我正在尝试使用 webpack 生成一个 npm 包，其中将包含 ES6 级别的 javascript（从 TypeScript 生成），并且也将使用 ES6 模块格式，而无需转译为 ES5 和 CommonJS。 （最终，除了 ES6 代码之外，我还希望在包中包含 ES5/CommonJS。）

当我尝试运行 webpack 时出现此错误：

[webpack-cli] 错误 [ERR_REQUIRE_ESM]: 必须使用 import 来加载 ES 模块：/Users/.../webpack.config.mjs

但是，正如您所见，我在 webpack.config.mjs 文件中使用了 import，如下所示：

import  CleanWebpackPlugin  from 'clean-webpack-plugin';
import path from 'path';

const NODE_ENV = process.env.NODE_ENV || 'production';

export default 
  mode: NODE_ENV,
  entry: './src/index.ts',
  target: 'node',
  output: 
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  ,
  ...

我正在使用 node v14.15.1，它应该支持 ES6 模块生成。我的package.json 看起来像这样：

  "name": "my-package",
  "version": "2.0.0",
  "description": "Blah, blah, blah",
  "type": "module",
  "module": "dist/index.js",
  "scripts": 
    "build": "webpack --output-module",
    "prepack": "npm run build",
    "prepublishOnly": "npm run build",
    "lint": "eslint \"src/**/*.ts\"",
    "test": "nyc --reporter=html mocha --require ts-node/register src/**/*.spec.ts",
    "test-dev": "mocha --require ts-node/register -w --watch-extensions ts src/**/*.spec.ts"
  ,
  ...
  "devDependencies": 
    ...
    "webpack": "^5.10.1",
    "webpack-cli": "^4.2.0",
    "webpack-node-externals": "^2.5.2"
    ...

我在上面尝试了各种变体：main 而不是module、main 以及module，文件名相同或不同（例如"module": "dist/index.esm.js"）。我试过去掉 webpack --output-module 选项，或者使用 --experiments-output-module 选项。

我发现了很多关于 ERR_REQUIRE_ESM 的帖子，但没有一个专门涉及我在这里尝试使用 webpack 做什么。即使对于其他相关问题，似乎也有很多挫败感，但答案很少。

【参考方案1】：

我通过迁移到typescript 类型的文件和方法解决了这个问题。令人惊讶的是它的工作原理：

package.json

 
   ...
   "type": "module",
   ...

babel.config.ts

export default api => 
  api.cache(true)
  return 
    presets: ['...'],
    plugins: ['...'],
    env:  '...': '...' ,
  

webpack.common.ts

import  common  from './webpack.common'
import webpack from 'webpack'
...

export default 
  entry: 
    '...': '...',
  ,
  output: 
    '...': '...',
  ,
  resolve: 
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
  ,
  module: 
    rules: [
      
        test: /\.(js|jsx|ts|tsx)$/i,
        exclude: /node_modules/,
        use: [
          
            loader: 'babel-loader',
            options: 
              cacheDirectory: true,
              presets: [
                [
                  '@babel/preset-env',
                  
                    '...': '...',
                  ,
                ],
                '@babel/preset-react',
                '@babel/typescript',
              ],
              plugins: [
                ['babel-plugin-transform-require-ignore', ],
                '@babel/plugin-proposal-class-properties',
                '@babel/plugin-proposal-object-rest-spread',
              ],
            ,
          ,
        ],
      ,
      '...'
    ],
  ,

tsconfig.json

  "compilerOptions": 
    "...": "..."
  ,
  "include": ["..."],
  "exclude": ["..."],
  "linterOptions": 
    "exclude": ["..."]
  ,
  "defaultSeverity": "..."

【讨论】：

我几乎忘记了这个问题，并放弃了，改用webpack.config.cjs 文件。我不知道你甚至可以使用webpack.config.ts 文件——我一定要试一试。即使还没有尝试过，我也会给你一个推定的赞成票:)

对我来说它有效。我受到工作中看到的代码的启发。但由于某些原因，他们并没有走得那么远。我什至将babel.config.ts 迁移到了打字稿。当然，结果取决于编译器-转译器设置。