How to fix modules with "ModuleConcatenation bailout: Module is not an ECMAScript module" bailout message?

You're using Babel to transpile your JavaScript files and by default the es2015 preset transforms ES modules (import/export) to CommonJS (what Node uses, require). Webpack receives the CommonJS modules, but the ModuleConcatenationPlugin relies on ES modules. You can configure Babel to not transform the modules with the modules option.

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

Webpack 2+ supports ES modules out of the box and it's best to leave them to webpack, because it enables features such as Tree Shaking.

For those who use modern @babel/preset-env:

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

But bad things (but not critical) that after that I can't use ES modules in my webpack config files as before, so in webpack.config.babel.js:

import webpack from 'webpack';

should be changed to:

const webpack = require('webpack');