如何使用“ModuleConcatenation 救助：模块不是 ECMAScript 模块”救助消息修复模块？

Posted 2023-02-22

【中文标题】如何使用“ModuleConcatenation 救助：模块不是 ECMAScript 模块”救助消息修复模块？

【英文标题】：How to fix modules with "ModuleConcatenation bailout: Module is not an ECMAScript module" bailout message?

【发布时间】：2018-01-05 03:41:15

【问题描述】：

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' 

【参考方案1】：

我最近遇到了一个与 Ionic 和 Angular 非常相似的问题。我已经将一个自定义组件导入到 app.module.ts 中，然后将其插入到 entryComponents 中，后来我决定走一条不同的路线。我删除了导入并忘记了 entryComponents 条目。我也遇到了同样的错误。

ModuleConcatenation bailout: Module is not an ECMAScript module

然后它指向了我的 variable.scss 路径，然后是下面这行

ERROR in Cannot read property 'members' of undefined

因此，对于任何有类似问题的人（很可能使用 Ionic 和/或 Angular），您可能必须确保您没有尝试在页面中使用组件，但该组件实际上并未导入，但在page.module.ts entryComponents。

【参考方案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');

【讨论】：

遗憾的是这对我不起作用。我得到的错误是：```Entrypoint mini-css-extract-plugin = * chunk 0 * (mini-css-extract-plugin) 497 KiB [entry] [rendered] > !!/Us.... .gin [0] ./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/ loader.js??ref--6-3!./source/scss/main.scss 495 KiB 0 [depth 0] [built] ModuleConcatenation bailout: Module is not an ECMAScript module single entry !!/Use.. .ce/scss/main.scss mini-css-extract-plugin ```

【参考方案3】：

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

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

Webpack 2+ 支持开箱即用的 ES 模块，最好将它们留给 webpack，因为它支持 Tree Shaking 等功能。

【讨论】：

这似乎是问题所在。我将不得不做更多的改变以使一切正常，但至少这为我提供了优化模块的前进道路。非常感谢！

我已经完成了这项工作，但仍然获得了救助。我想知道这是否是我的模块的结构方式。

@ScottLeonard 您是否将选项添加到您的webpack.config.js 或.babelrc？我发现它只适用于 Webpack 配置。

当我尝试将其添加到webpack.config.js 时，我得到Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'presets'。 webpack 版本 4.44.2

'presets' 必须在 webpack babel 加载器的 'options' 内