[英]webpack: “[ERR_REQUIRE_ESM]: Must use import to load ES Module” - But I AM using import!
I'm trying to generate an npm package with webpack, which will contain ES6-level JavaScript (generated from TypeScript), and will use the ES6 module format as well, without transpiling down to ES5 and CommonJS. I'm trying to generate an npm package with webpack, which will contain ES6-level JavaScript (generated from TypeScript), and will use the ES6 module format as well, without transpiling down to ES5 and CommonJS. (Eventually I'd like to have ES5/CommonJS in the package too, in addition to the ES6 code.)
(最终,除了 ES6 代码之外,我还想在 package 中使用 ES5/CommonJS。)
I'm getting this error when I try to run webpack
:当我尝试运行
webpack
时出现此错误:
[webpack-cli] Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/.../webpack.config.mjs
[webpack-cli] 错误 [ERR_REQUIRE_ESM]:必须使用导入来加载 ES 模块:/Users/.../webpack.config.mjs
As you can see, however, I AM using import
in my webpack.config.mjs
file, which looks like this:但是,如您所见,我在
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'
},
...
I'm using node v14.15.1, which is supposed to support ES6 module generation.我正在使用节点 v14.15.1,它应该支持 ES6 模块生成。 My
package.json
looks like this:我的
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"
...
I've tried all sorts of variations on the above: main
instead of module
, main
along with module
, with the same or different file names (such as "module": "dist/index.esm.js"
).我在上面尝试了各种变体:
main
而不是module
, main
和module
,具有相同或不同的文件名(例如"module": "dist/index.esm.js"
)。 I've tried taking away the webpack --output-module
option, or using the --experiments-output-module
option.我试过去掉 webpack
--output-module
选项,或使用--experiments-output-module
选项。
I've found lots of posts concerning ERR_REQUIRE_ESM
, but none dealing specifically with what I'm trying to do here with webpack.我发现了很多关于
ERR_REQUIRE_ESM
的帖子,但没有一个专门处理我在这里尝试使用 webpack 做的事情。 Even for other related issues there seems to be lots of frustration but few answers.即使对于其他相关问题,似乎也有很多挫败感,但答案很少。
I solved this problem by migrating to typescript
type of files and approach.我通过迁移到
typescript
类型的文件和方法解决了这个问题。 Suprisingly enough it works:令人惊讶的是它的工作原理:
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": "..."
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.