1

I am trying to wrap my head around module concatenation with Webpack 4.

I have an entry.js script which uses imports from multiple modules which in turn import multiple modules.

Using optimizationBailout warnings when bundeling throws following bailout warning.

ModuleConcatenation bailout: Module is referenced from these modules with unsupported syntax: multi ./public/js/entry.js (referenced with single entry)

What does this bailout mean? How can I use module concatenation on the entry script?

webpack.config.js looks as follows:

const path = require('path');

module.exports = {
  entry: {
    xyz: ['./public/js/xyz_entry.js']
  },
  output: {
    path: path.resolve(__dirname, 'public/js/build'),
    filename: '[name]_bundle.js'
  },
  devtool: 'source-map',
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/
    }]
  },
  optimization: {
    concatenateModules: true
  },
  stats: {
    maxModules: Infinity,
    optimizationBailout: true
  }
};

entry.js looks like this:

import token from './token';

import hooks from './hooks';

token(init);

function init() {

  hooks();

}

I import export in the modules like so (token.mjs):

import workspace from './workspace.mjs';

export default next => { }

My dev dependencies in the package.json are:

  "devDependencies": {
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0"
  }

I get following output on the build process:

dennis@dennis:~/Git/xyz$ npm run dev

> xyz@0.0.0 dev /home/dennis/Git/xyz
> webpack --mode development

Hash: 6cfd1959ae17f9c8b13d
Version: webpack 4.19.1
Time: 233ms
Built at: 2018-09-21 19:27:16
        Asset      Size  Chunks             Chunk Names
    xyz_bundle.js  14.2 KiB     xyz  [emitted]  xyz
xyz_bundle.js.map  15.5 KiB     xyz  [emitted]  xyz
Entrypoint xyz = xyz_bundle.js xyz_bundle.js.map
[./public/js/xyz_entry.js] ./public/js/xyz_entry.js + 3 modules 9.68 KiB {xyz} [built]
    | ./public/js/xyz_entry.js 4.8 KiB [built]
    |     ModuleConcatenation bailout: Module is referenced from these modules with unsupported syntax: multi ./public/js/xyz_entry.js (referenced with single entry)
    | ./public/js/token.mjs 2.26 KiB [built]
    | ./public/js/hooks.mjs 2.05 KiB [built]
    | ./public/js/workspace.mjs 579 bytes [built]
[0] multi ./public/js/xyz_entry.js 28 bytes {xyz} [built]
    ModuleConcatenation bailout: Module is not an ECMAScript module
Dennis Bauszus
  • 1,624
  • 2
  • 19
  • 44
  • Some related links https://stackoverflow.com/questions/45384170/how-to-fix-modules-with-moduleconcatenation-bailout-module-is-not-an-ecmascrip https://webpack.js.org/plugins/module-concatenation-plugin/ https://babeljs.io/docs/en/babel-preset-env but still can't found solution because babel docs said *Please note: when specifying the esmodules target, browsers targets will be ignored.* – basil Sep 28 '18 at 06:35
  • Maybe https://stackoverflow.com/questions/45384170/how-to-fix-modules-with-moduleconcatenation-bailout-module-is-not-an-ecmascrip is solution – basil Sep 28 '18 at 06:44
  • I removed babel completely and updated the issue post accordingly. the problem persists so this is not related to babel transpiling the es6 statements prior to loading the modules in webpack. – Dennis Bauszus Sep 28 '18 at 14:38

0 Answers0