title: How to fix modules with "ModuleConcatenation bailout: Module is not an ECMAScript module" bailout message?
body: <p>Webpack3 comes with the <code>ModuleConcatenation</code> plugin that when used with the <code>--display-optimization-bailout</code> flag will give you the reason for bailout.</p>
  
  <p>The bailout messages not that easy to understand, and it's hard to understand why they happened to a specific module.</p>
  
  <p>Here is my output for the <code>webpack</code> command on a very simplified version of my project:</p>
  
  <pre><code>&gt; 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
  </code></pre>
  
  <p>I simplified the contents of <code>./src/client/bootstrap/ErrorTrap.js</code> as much as I could, and I still get the <code>ModuleConcatenation bailout: Module is not an ECMAScript module</code>. Here are its contents:</p>
  
  <pre><code>class ErrorTrap {
  }
  
  export default ErrorTrap;
  </code></pre>
  
  <p>I looked into understanding this bailout message, and one of the reasons it happens is when the module doesn't have imports or exports, as seen at <a href="https://github.com/webpack/webpack/blob/93ac8e9c3699bf704068eaccaceec57b3dd45a14/lib/dependencies/HarmonyDetectionParserPlugin.js#L12-L14" rel="noreferrer">https://github.com/webpack/webpack/blob/93ac8e9c3699bf704068eaccaceec57b3dd45a14/lib/dependencies/HarmonyDetectionParserPlugin.js#L12-L14</a>, but I don't know why it's not considering this module a <code>ECMAScript</code> module.</p>
  
  <p><strong>.babelrc</strong></p>
  
  <pre><code>{
    "presets": [
      "es2015"
    ]
  }
  </code></pre>
  
  <p><strong>webpack.config.js</strong> representation:</p>
  
  <pre><code>{ 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' }
  </code></pre>