web-dev-qa-db-fra.com

Comment réparer les modules avec le message de sauvetage "ModuleConcatenation: Module n'est pas un module ECMAScript"?

Webpack3 est fourni avec le plugin ModuleConcatenation qui, lorsqu'il est utilisé avec le --display-optimization-bailout flag vous donnera la raison du renflouement.

Les messages de sauvetage ne sont pas faciles à comprendre et il est difficile de comprendre pourquoi ils sont arrivés à un module spécifique.

Voici ma sortie pour la commande webpack sur une version très simplifiée de mon projet:

> 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

J'ai simplifié le contenu de ./src/client/bootstrap/ErrorTrap.js autant que je le pouvais, et je reçois toujours le ModuleConcatenation bailout: Module is not an ECMAScript module. Voici son contenu:

class ErrorTrap {
}

export default ErrorTrap;

J'ai cherché à comprendre ce message de sauvetage, et l'une des raisons pour lesquelles cela se produit est lorsque le module n'a pas d'importations ou d'exportations, comme vu sur https://github.com/webpack/webpack/blob/93ac8e9c3699bf704068eaccaceec57b3dd45a14/ lib/dependencies/HarmonyDetectionParserPlugin.js # L12-L14 , mais je ne sais pas pourquoi il ne considère pas ce module comme un module ECMAScript.

. babelrc 

{
  "presets": [
    "es2015"
  ]
}

représentation 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' }
webpackwebpack-3
15
fabiomcosta

Vous utilisez Babel pour transpiler vos fichiers JavaScript et par défaut le es2015 preset transforme les modules ES (import/export) en CommonJS (ce que Node utilise, require). Webpack reçoit les modules CommonJS , mais le ModuleConcatenationPlugin repose sur des modules ES. Vous pouvez configurer Babel pour ne pas transformer les modules avec modules option .

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

Webpack 2+ prend en charge les modules ES prêts à l'emploi et il est préférable de les laisser à webpack, car il permet des fonctionnalités telles que Tree Shaking .

20
Michael Jungo

Pour ceux qui utilisent le @babel/preset-env Moderne:

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

Mais de mauvaises choses (mais pas critiques) qui après cela, je ne peux plus utiliser les modules ES dans mes fichiers de configuration webpack, donc dans webpack.config.babel.js:

import webpack from 'webpack';

devrait être remplacé par:

const webpack = require('webpack');
4
basil