javascript - webpack: "[ERR_REQUIRE_ESM]: Must use import to load ES Module" - 但我用的是 import!
问题描述
我正在尝试使用 webpack 生成一个 npm 包,它将包含 ES6 级别的 JavaScript(从 TypeScript 生成),并且也将使用 ES6 模块格式,而无需转译为 ES5 和 CommonJS。(最终,除了 ES6 代码之外,我还希望在包中包含 ES5/CommonJS。)
当我尝试运行时出现此错误webpack
:
[webpack-cli] 错误 [ERR_REQUIRE_ESM]:必须使用导入来加载 ES 模块:/Users/.../webpack.config.mjs
但是,如您所见,我import
在我的webpack.config.mjs
文件中使用,如下所示:
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'
},
...
我正在使用节点 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 做的事情。即使对于其他相关问题,似乎也有很多挫败感,但答案很少。
解决方案
我通过迁移到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": "..."
}
推荐阅读
- scala - 在 Scala 中,具有 main 方法的多个对象可以存在于单个文件中并单独运行。这背后的原因是什么?
- python - 应用过滤器后使用 django-rest-framework 获取模型的随机对象
- python - How to apply function to all rows in data frame?
- bash - 如何将gunzip流发送到另一台服务器而不在本地解压缩?
- php - 更新在 laravel 中填充了错误旧数据的表单字段
- python-3.x - Selenium(Python)在自动登录后找不到动态加载的 JavaScript 表
- sql - 为什么 MongoDB skip() 不使用索引?
- python - readthedocs 上的 Sphinx 扩展
- gcc - 为什么在使用 gcc -o2 优化时添加延迟?
- javascript - Android studio Alert 对话框块空间用于文本输入