<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
<strong>Bug</strong></p>

<p dir="auto">Asked this question in SO and gitter but no proper answer.</p>

<p dir="auto"><strong>What is the current behavior?</strong><br>
I used dynamic imports(<code class="notranslate">import()</code>) feature in my application like following.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  // Make reducers hot reloadable, see http://mxs.is/googmo
  /* istanbul ignore next */
  if (module.hot) {
    module.hot.accept('./reducers', () =&gt; {
      import('./reducers').then((reducerModule) =&gt; {
        const createReducers = reducerModule.default;
        const nextReducers = createReducers(store.asyncReducers);

        store.replaceReducer(nextReducers);
      });
    });
  }"><pre class="notranslate">  <span class="pl-c">// Make reducers hot reloadable, see http://mxs.is/googmo</span>
  <span class="pl-c">/* istanbul ignore next */</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">hot</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">hot</span><span class="pl-kos">.</span><span class="pl-en">accept</span><span class="pl-kos">(</span><span class="pl-s">'./reducers'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'./reducers'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">reducerModule</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-k">const</span> <span class="pl-s1">createReducers</span> <span class="pl-c1">=</span> <span class="pl-s1">reducerModule</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">;</span>
        <span class="pl-k">const</span> <span class="pl-s1">nextReducers</span> <span class="pl-c1">=</span> <span class="pl-s1">createReducers</span><span class="pl-kos">(</span><span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-c1">asyncReducers</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">replaceReducer</span><span class="pl-kos">(</span><span class="pl-s1">nextReducers</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span></pre></div>
<p dir="auto">I also have babel stage-0 preset added which is expected to have dynamic imports babel plugin. I used webpack 2.5.1 before upgrading webpack 3.6.0 recently. Everything worked fine even after upgrade.</p>
<p dir="auto">I wanted to add scope hoisting feature for which added <code class="notranslate">new webpack.optimize.ModuleConcatenationPlugin()</code> in my production webpack config. This started throwing following error for all dynamic imports.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ERROR in chunk main [entry]
[name].[chunkhash].js
'import' and 'export' may only appear at the top level (42:6)
|   if (false) {
|     module.hot.accept('./reducers', function () {
|       import('./reducers').then(function (reducerModule) {
|         var createReducers = reducerModule.default;
|         var nextReducers = createReducers(store.asyncReducers);"><pre class="notranslate"><code class="notranslate">ERROR in chunk main [entry]
[name].[chunkhash].js
'import' and 'export' may only appear at the top level (42:6)
|   if (false) {
|     module.hot.accept('./reducers', function () {
|       import('./reducers').then(function (reducerModule) {
|         var createReducers = reducerModule.default;
|         var nextReducers = createReducers(store.asyncReducers);
</code></pre></div>
<p dir="auto">Able to resolve the error with <code class="notranslate">System.import</code>. But that is deprecated and better way to do is with <code class="notranslate">import()</code> since it's in stage-3 now.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>



<p dir="auto"><strong>What is the expected behavior?</strong><br>
Should not throw any error<br>
<strong>If this is a feature request, what is motivation or use case for changing the behavior?</strong></p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong><br>
webpack version: 3.6.0<br>
nodejs: 6.11.1</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Running a module with <code class="notranslate">if(...) { import().then(...) }</code> through <code class="notranslate">ModuleConcatenationPlugin</code> results in an Acorn exception with Webpack 3.5.2. The module has been run through Babel w/ babel-preset-env and modules=false.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ERROR in chunk global [initial]
[name].[hash].js
'import' and 'export' may only appear at the top level (112:2)
|
| if (false) {
|   import('react-addons-perf').then(function (Perf) {
|     window.Perf = Perf;
|   });
SyntaxError: 'import' and 'export' may only appear at the top level (112:2)
|
| if (false) {
|   import('react-addons-perf').then(function (Perf) {
|     window.Perf = Perf;
|   });
    at Parser.pp$4.raise (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:2610:13)
    at Parser.pp$1.parseStatement (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:780:16)
    at Parser.pp$1.parseBlock (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:1076:23)
    at Parser.pp$1.parseStatement (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:774:34)
    at Parser.pp$1.parseIfStatement (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:901:26)
    at Parser.pp$1.parseStatement (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:763:31)
    at Parser.pp$1.parseTopLevel (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:690:23)
    at Parser.parse (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:543:15)
    at Object.parse (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:3669:37)
    at modulesWithInfo.forEach.info (~/node_modules/webpack/lib/optimize/ConcatenatedModule.js:418:18)
    at Array.forEach (&lt;anonymous&gt;)
    at ConcatenatedModule.source (~/node_modules/webpack/lib/optimize/ConcatenatedModule.js:411:19)
    at ModuleTemplate.render (~/node_modules/webpack/lib/ModuleTemplate.js:14:31)
    at ~/node_modules/webpack/lib/Template.js:116:28
    at Function.from (native)
    at Chunk.mapModules (~/node_modules/webpack/lib/Chunk.js:163:16)
    at ChunkTemplate.renderChunkModules (~/node_modules/webpack/lib/Template.js:113:26)
    at ChunkTemplate.render (~/node_modules/webpack/lib/ChunkTemplate.js:16:30)
    at Compilation.createChunkAssets (~/node_modules/webpack/lib/Compilation.js:1290:35)
    at sealPart2 (~/node_modules/webpack/lib/Compilation.js:646:10)
    at next (~/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.compilation.plugin (~/node_modules/webpack/lib/ProgressPlugin.js:111:6)
    at Compilation.applyPluginsAsyncSeries (~/node_modules/tapable/lib/Tapable.js:206:13)
    at Compilation.seal (~/node_modules/webpack/lib/Compilation.js:596:8)
    at applyPluginsParallel.err (~/node_modules/webpack/lib/Compiler.js:514:17)
    at ~/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (~/node_modules/webpack/lib/Compilation.js:498:11)
    at processModuleDependencies.err (~/node_modules/webpack/lib/Compilation.js:468:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)"><pre class="notranslate"><code class="notranslate">ERROR in chunk global [initial]
[name].[hash].js
'import' and 'export' may only appear at the top level (112:2)
|
| if (false) {
|   import('react-addons-perf').then(function (Perf) {
|     window.Perf = Perf;
|   });
SyntaxError: 'import' and 'export' may only appear at the top level (112:2)
|
| if (false) {
|   import('react-addons-perf').then(function (Perf) {
|     window.Perf = Perf;
|   });
    at Parser.pp$4.raise (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:2610:13)
    at Parser.pp$1.parseStatement (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:780:16)
    at Parser.pp$1.parseBlock (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:1076:23)
    at Parser.pp$1.parseStatement (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:774:34)
    at Parser.pp$1.parseIfStatement (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:901:26)
    at Parser.pp$1.parseStatement (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:763:31)
    at Parser.pp$1.parseTopLevel (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:690:23)
    at Parser.parse (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:543:15)
    at Object.parse (~/node_modules/webpack/node_modules/acorn/dist/acorn.js:3669:37)
    at modulesWithInfo.forEach.info (~/node_modules/webpack/lib/optimize/ConcatenatedModule.js:418:18)
    at Array.forEach (&lt;anonymous&gt;)
    at ConcatenatedModule.source (~/node_modules/webpack/lib/optimize/ConcatenatedModule.js:411:19)
    at ModuleTemplate.render (~/node_modules/webpack/lib/ModuleTemplate.js:14:31)
    at ~/node_modules/webpack/lib/Template.js:116:28
    at Function.from (native)
    at Chunk.mapModules (~/node_modules/webpack/lib/Chunk.js:163:16)
    at ChunkTemplate.renderChunkModules (~/node_modules/webpack/lib/Template.js:113:26)
    at ChunkTemplate.render (~/node_modules/webpack/lib/ChunkTemplate.js:16:30)
    at Compilation.createChunkAssets (~/node_modules/webpack/lib/Compilation.js:1290:35)
    at sealPart2 (~/node_modules/webpack/lib/Compilation.js:646:10)
    at next (~/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.compilation.plugin (~/node_modules/webpack/lib/ProgressPlugin.js:111:6)
    at Compilation.applyPluginsAsyncSeries (~/node_modules/tapable/lib/Tapable.js:206:13)
    at Compilation.seal (~/node_modules/webpack/lib/Compilation.js:596:8)
    at applyPluginsParallel.err (~/node_modules/webpack/lib/Compiler.js:514:17)
    at ~/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (~/node_modules/webpack/lib/Compilation.js:498:11)
    at processModuleDependencies.err (~/node_modules/webpack/lib/Compilation.js:468:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
</code></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">I'm unfortunately unable to reproduce this using a minimal repo – a minimal repo I tried to make works fine <g-emoji class="g-emoji" alias="frowning_face" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2639.png">☹️</g-emoji></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">No crashing :)</p>
<p dir="auto">Naturally the workaround is to disable <code class="notranslate">ModuleConcatenationPlugin</code>.</p>