Parsing of `import()` fails in 4.29.0 (Compilation issue, related to dynamic import)

Bug report

What is the current behavior?

I’ve updated to v4.29.0, and my code is no longer compiling.

Error:

Module parse failed: Unexpected token (11:10)
You may need an appropriate loader to handle this file type.
|       var AsyncHome = asyncComponent(appendAsyncReducer, epicSubject$, function () {
|         return process.env.SERVER ? require('./home')
>         : import(
|         /* webpackChunkName: "books" */
|         './home');
 @ ./server/ssr.js 15:0-34 167:25-34
 @ ./server/index.js

If I revert to v4.28.2, it works again.

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

1. Clone https://github.com/Dbuggerx/react-book-search-sample.git
2. npm i and compile the code (npm run start-server or npm run start) - it should work
3. Now, install webpack v4.29.0 and try to compile again

What is the expected behavior? It should compile the code without errors, as it was doing on v4.28.2

Other relevant information: webpack version: v4.29.0 Node.js version: v10.15.0 Operating System: Fedora linux 29

[sokra]

Running these commands fixes the problem in your repro @Dbuggerx

npm update acorn --depth 20
npm dedupe

---

It seem to be a npm problem.

Here is an explanation:

webpack depends on acorn@^6.0.5 and acorn-dynamic-import. acorn-dynamic-import has a peerDependency to acorn. The peer dependency marks that acorn-dynamic-import wants to use the acorn dependency of webpack.

Normally this works fine, but in your repo npm created a tree like this:

>npm ls acorn
react-book-search-sample@0.0.1
+-- eslint@5.10.0
| `-- espree@5.0.0
|   `-- acorn@6.0.4
+-- jest@23.6.0
| `-- jest-cli@23.6.0
|   `-- jest-environment-jsdom@23.4.0
|     `-- jsdom@11.12.0
|       +-- acorn@5.7.3
|       `-- acorn-globals@4.3.0
|         `-- acorn@6.0.4  deduped
+-- prettier-eslint@8.8.2
| +-- eslint@4.19.1
| | `-- espree@3.5.4
| |   +-- acorn@5.7.3
| |   `-- acorn-jsx@3.0.1
| |     `-- acorn@3.3.0
| `-- vue-eslint-parser@2.0.3
|   `-- espree@3.5.4
|     +-- acorn@5.7.3
|     `-- acorn-jsx@3.0.1
|       `-- acorn@3.3.0
+-- webpack@4.29.0
| `-- acorn@6.0.5
`-- webpack-bundle-analyzer@3.0.3
  `-- acorn@5.7.3

Note the deduped acorn@6.0.4 dependency was moved/hoisted to the root node_modules directory and webpack got it’s own acorn@6.0.5 dependency in it’s own node_modules. So far fine, but npm has chosen to hoist the acorn-dynamic-import dependency to the root node_modules directory. Now it no longer uses the same acorn dependency as webpack does. The version doesn’t matter so much, but the instance equality.

node_modules
  webpack
    node_modules
      acorn
  acorn
  acorn-dynamic-import

I claim that npm should not hoist acorn-dynamic-import here as it has a peerDependency on acorn. It must ensure that webpack and acorn-dynamic-import have access to the same acorn dependency.

Running the commands above fixes the problem as it pushes all acorn dependency to the same version and allowing to hoist the acorn dependency in webpack too. It’s more a workaround, but should work. It changes the tree to:

>npm ls acorn
react-book-search-sample@0.0.1
+-- eslint@5.10.0
| `-- espree@5.0.0
|   `-- acorn@6.0.5  deduped
+-- jest@23.6.0
| `-- jest-cli@23.6.0
|   `-- jest-environment-jsdom@23.4.0
|     `-- jsdom@11.12.0
|       +-- acorn@5.7.3
|       `-- acorn-globals@4.3.0
|         `-- acorn@6.0.5  deduped
+-- prettier-eslint@8.8.2
| +-- eslint@4.19.1
| | `-- espree@3.5.4
| |   +-- acorn@5.7.3
| |   `-- acorn-jsx@3.0.1
| |     `-- acorn@3.3.0
| `-- vue-eslint-parser@2.0.3
|   `-- espree@3.5.4
|     +-- acorn@5.7.3
|     `-- acorn-jsx@3.0.1
|       `-- acorn@3.3.0
+-- webpack@4.29.0
| `-- acorn@6.0.5
`-- webpack-bundle-analyzer@3.0.3
  `-- acorn@5.7.3

node_modules
  webpack
  acorn
  acorn-dynamic-import

[jonathanong]

same here, downgrading to 4.28 works

ERROR in ./client/pages/Tags/index.js 16:9
Module parse failed: Unexpected token (16:9)
You may need an appropriate loader to handle this file type.
| import Loading from '../Loading';
| var TagsView = lazy(function () {
>   return import('./View'
|   /* webpackChunkName: "page-tags-view" */
|   );
 @ ./client/routes.js 6:0-32 30:15-19
 @ ./client/App.js
 @ ./client/render.js
 @ ./client/index.js