如何使用"ModuleConcatenation bailout: Module is not an ECMAScript module"救助消息修复模块？

Question

Webpack3 附带了一个ModuleConcatenation插件，当与--display-optimization-bailout标志一起使用时，它会给你救助的理由。

救助信息并不容易理解，也很难理解为什么它们发生在特定的模块上。

这是我在非常简化的项目版本上对webpack命令的输出：

> webpack --bail --display-optimization-bailout
Hash: 4a9a55dc2883e82a017e
Version: webpack 3.4.1
Child client:
Hash: 4a9a55dc2883e82a017e
Time: 594ms
Asset       Size  Chunks                    Chunk Names
a.d3ade61d21d5cb8dd426.bundle.js  712 bytes       0  [emitted]         a
a.d3ade61d21d5cb8dd426.bundle.js.map    6.57 kB       0  [emitted]         a
manifest.json  102 bytes          [emitted]         
index.html     299 kB          [emitted]  [big]  
[0] multi ./src/client/bootstrap/ErrorTrap.js 28 bytes {0} [built]
ModuleConcatenation bailout: Module is not an ECMAScript module
[1] ./src/client/bootstrap/ErrorTrap.js 199 bytes {0} [built]
ModuleConcatenation bailout: Module is not an ECMAScript module

我尽可能地简化了./src/client/bootstrap/ErrorTrap.js的内容，我仍然得到了ModuleConcatenation bailout: Module is not an ECMAScript module.以下是其内容：

class ErrorTrap {
}
export default ErrorTrap;

我研究了理解这个救助信息，它发生的原因之一是当模块没有导入或导出时，如 https://github.com/webpack/webpack/blob/93ac8e9c3699bf704068eaccaceec57b3dd45a14/lib/dependencies/HarmonyDetectionParserPlugin.js#L12-L14 所示，但我不知道为什么它不认为这个模块是一个ECMAScript模块。

.babelrc

{
"presets": [
"es2015"
]
}

webpack.config.js表示：

{ target: 'web',
devtool: 'source-map',
entry: { a: [ './src/client/bootstrap/ErrorTrap.js' ] },
output:
{ path: '/project/build/client/assets',
filename: '[name].[chunkhash].bundle.js',
chunkFilename: '[name].[chunkhash].chunk.js',
publicPath: '/assets/' },
module: { rules: [ [Object], [Object], [Object], [Object], [Object] ] },
resolve: { alias: { 'lodash.defaults': 'lodash' } },
plugins:
[ ModuleConcatenationPlugin { options: {} },
CommonsChunkPlugin {
chunkNames: [Object],
filenameTemplate: undefined,
minChunks: Infinity,
selectedChunks: undefined,
children: undefined,
async: undefined,
minSize: undefined,
ident: '/project/node_modules/webpack/lib/optimize/CommonsChunkPlugin.js0' },
ManifestPlugin { opts: [Object] },
ChunkManifestPlugin {
manifestFilename: 'chunk-manifest.json',
manifestVariable: 'webpackManifest',
inlineManifest: false },
OccurrenceOrderPlugin { preferEntry: undefined },
DefinePlugin { definitions: [Object] },
VisualizerPlugin { opts: [Object] },
ExtractTextPlugin { filename: '[name].[contenthash].css', id: 1, options: {} },
UglifyJsPlugin { options: [Object] },
LoaderOptionsPlugin { options: [Object] } ],
name: 'client' }

Answer 1

你正在使用 Babel 来转译你的 JavaScript 文件，默认情况下，es2015预设将 ES 模块(import/export(转换为 CommonJS(Node 使用的，require(。Webpack 接收 CommonJS 模块，但ModuleConcatenationPlugin依赖于 ES 模块。您可以将 Babel 配置为不使用modules选项转换模块。

{
"presets": [
["es2015", { "modules": false }]
]
}

Webpack 2+ 支持开箱即用的 ES 模块，最好将它们留给 webpack，因为它支持诸如摇树之类的功能。

Answer 2

对于那些使用现代@babel/preset-env的人：

{
"presets": [
["@babel/preset-env",{
"targets": {
...
},
"modules": false
}],
"@babel/preset-react"
],
"plugins": [...
}

但是不好的事情(但不重要(，在那之后我不能像以前一样在我的 webpack 配置文件中使用 ES 模块，所以在webpack.config.babel.js中：

import webpack from 'webpack';

应改为：

const webpack = require('webpack');

Answer 3

我最近遇到了一个非常相似的离子和角度问题。我将一个自定义组件导入到app.module.ts中，然后将其插入entryComponents，后来决定要走另一条路。我删除了导入并忘记了条目组件条目。我也有同样的错误。

ModuleConcatenation bailout: Module is not an ECMAScript module

然后它指向我的变量.scss路径，然后是以下行

ERROR in Cannot read property 'members' of undefined

因此，对于任何有类似问题的人(最有可能使用Ionic和/或Angular(，您可能必须确保您没有尝试在实际上未导入的页面中使用组件，但在page.module.ts entryComponents中仍然有一个尾随点。