Error when I add ModuleConcatenationPlugin while using dynamic imports

Do you want to request a feature or report a bug?
Bug

Asked this question in SO and gitter but no proper answer.

What is the current behavior?
I used dynamic imports(import()) feature in my application like following.

  // Make reducers hot reloadable, see http://mxs.is/googmo
  /* istanbul ignore next */
  if (module.hot) {
    module.hot.accept('./reducers', () => {
      import('./reducers').then((reducerModule) => {
        const createReducers = reducerModule.default;
        const nextReducers = createReducers(store.asyncReducers);

        store.replaceReducer(nextReducers);
      });
    });
  }

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.

I wanted to add scope hoisting feature for which added new webpack.optimize.ModuleConcatenationPlugin() in my production webpack config. This started throwing following error for all dynamic imports.

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);

Able to resolve the error with System.import. But that is deprecated and better way to do is with import() since it’s in stage-3 now.

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?
Should not throw any error
If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
webpack version: 3.6.0
nodejs: 6.11.1

Author: Fantashit

1 thought on “Error when I add ModuleConcatenationPlugin while using dynamic imports

  1. @sgal @donocode
    Just got the usecase after observing my code failure and #5663. Code is failing only when we have dynamic imports inside if statement which has false set directly like following.

    if (false) {
         module.hot.accept('./reducers', function () {
           import('./reducers').then(function (reducerModule) {
             var createReducers = reducerModule.default;
             var nextReducers = createReducers(store.asyncReducers);

    When I set it to a variable like following, it doesn’t throw any error.

    const flag = false;
    if (flag) {
         module.hot.accept('./reducers', function () {
           import('./reducers').then(function (reducerModule) {
             var createReducers = reducerModule.default;
             var nextReducers = createReducers(store.asyncReducers);

    Not sure if this is a babel issue or webpack’s acorn issue.

Comments are closed.