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

[Dbuggerx]

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

[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

[davidaq]

Same issue here. All calls to import() result in an Unexpected token Error.

[gustavochavarria]

Same problem.

Im using vue cli 3.3 (now updated) and get this problem.

error  in ./src/router.js

Module parse failed: Unexpected token (6:9)
You may need an appropriate loader to handle this file type.

[g-six]

Same here, works fine when I downgrade to 4.28.4

ERROR in ./pages/Home/index.tsx 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
| import { BeatLoader } from 'react-spinners';
| export const LoadableHomePage = Loadable({
>   loader: () => import(
|   /* webpackChunkName: "homepage" */
|   './page'),

[lbogdan]

Worth mentioning this doesn't manifest when installing packages using yarn (at least for @vue/cli).

[ogheo]

Same on my side...

[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

[Dbuggerx]

Thanks for the explanation @sokra! I can't try the workaround right now (will do it as soon as I get home and will let you know).
But since I'm not the only one with such issue, how could this "npm issue" be avoided? I mean, as a webpack user, I expected to install the new version and keep working normally.

[EvanBurbidge]

Workaround with npm didn't seem to work in a vue cli project

Steps taken:

• remove node_modules,
• remove package-lock.json
• npm install
• npm update acorn --depth 20
• npm dedupe
• npm run serve

error  in ./src/router.js

Module parse failed: Unexpected token (19:13)
You may need an appropriate loader to handle this file type.
|     // which is lazy-loaded when the route is visited.
|     component: function component() {
>       return import(
|       /* webpackChunkName: "about" */
|       './views/About.vue');

@ ./src/main.js 6:0-30 10:10-16
@ multi (webpack)-dev-server/client?http://192.168.0.14:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Output from npm ls acorn

app1 evan$ npm ls acorn
app1@0.1.0 /Users/evan/Desktop/dev/monorepo-test/packages/app1
├─┬ @vue/cli-plugin-eslint@3.3.0
│ └─┬ eslint@4.19.1
│   └─┬ espree@3.5.4
│     ├── acorn@5.7.3  deduped
│     └─┬ acorn-jsx@3.0.1
│       └── acorn@3.3.0 
├─┬ @vue/cli-service@3.3.0
│ ├── acorn@6.0.5 
│ └─┬ webpack-bundle-analyzer@3.0.3
│   └── acorn@5.7.3 
├─┬ eslint@5.12.1
│ └─┬ espree@5.0.0
│   └── acorn@6.0.5 
└─┬ eslint-plugin-vue@5.1.0
  └─┬ vue-eslint-parser@4.0.3
    └─┬ espree@4.1.0
      └── acorn@6.0.5 

can confirm downgrade to previous version issue does not persist
$ npm install webpack@4.28.4

[BigBuckBunny]

Workaround with npm didn't with React using Suspense and lazy

[g-six]

Workaround worked for me:
react & react-loader

[sokra]

Here is an alternative workaround:

add "acorn": "^6.0.5" to your applications package.json.

@EvanBurbidge I would be interested if using yarn solves the issue in your case?

[WhatIsSpark]

Steps taken:

npm install webpack@4.28.4
npm install acorn-dynamic-import@4.0.0
npm update acorn --depth 20
npm dedupe

npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.

It worked for me !!! @sokra

[EvanBurbidge]

@sokra works with yarn.

When installing acorn still no joy with npm. Getting the following warning.

npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.

Steps Taken:

• rm -rf node_modules
• rm -rf package-lock.json
• npm install
• npm install acorn@6.0.5 -D
• npm run serve

 ERROR  Failed to compile with 1 errors                                                                                                                            2:14:02 PM

 error  in ./src/router.js

Module parse failed: Unexpected token (6:9)
You may need an appropriate loader to handle this file type.
|
| var About = function About() {
>   return import('./views/About.vue');
| };
|

 @ ./src/main.js 6:0-30 10:10-16
 @ multi (webpack)-dev-server/client?http://192.168.0.14:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

[sokra]

Also reported here: https://npm.community/t/packages-with-peerdependencies-are-incorrectly-hoisted/4794

[devCrossNet]

downgrade to "webpack": "4.28.4" in your projects package.json also works for now. Just did that a couple of hours ago.

[mqliutie]

@WhatIsSpark Nice~~

[salemhilal]

Just in case someone ends up here like I did, here's the state of affairs (as far as I can tell), to save some scrolling.

• NPM knows about the bug
• @sokra proposed a fix
• which was unfortunately reverted
• and won't be re-patched until npm's resolver is re-implemented

My team has had success by removing our package-lock.json and our node_modules folder and re-npm-install-ing, but it's not clear that that'll work for everyone (we probably just got lucky with how NPM decided to resolve peer dependencies for us). We'll probably end up migrating to Yarn, which doesn't seem to have this problem.

[kahanu]

Solved (for me)

Hopefully this will work for others as well. My dev team mate and I was able to fix my issue based on the explanation from @sokra.

In short: the order that the dependencies are installed, matter.

Here is my acorn dependency tree:

intranet@0.1.0 C:\Users\me\source\repos\portal
+-- @angular-devkit/build-angular@0.800.6
| `-- webpack@4.30.0
|   `-- acorn@6.4.1
+-- jspdf@1.5.3
| `-- canvg@1.5.3
|   `-- jsdom@8.5.0
|     +-- acorn@2.7.0   <-- older version
|     `-- acorn-globals@1.0.9
|       `-- acorn@2.7.0
`-- webpack-bundle-analyzer@3.6.1
  `-- acorn@7.1.1

The problem occurred when I had to start working from home and I pulled the repo onto my local machine. All of that was fine, but I figured out later that in this case, it was the order that the npm packages were installed made all the difference.

At work, the jspdf package was installed at a later time, after all the other packages had been installed, so at that point, the version of acorn was 6.0.5. So when I installed jspdf with the dependency of acorn version 2.7.0, it just used version 6.0.5.

But when I installed all the packages at home, jspdf was one of the first packages installed that used acorn, and it install version 2.7.0. So any other package that depended on acorn, used version 2.7.0 which would break that package.

The Solution

To solve the problem, I did the following:

1. Delete - delete the node_modules folder and the package-lock.json file.
2. Remove jspdf - I removed the jspdf reference from the package.json file.
3. npm install - then I ran npm install to install all packages except jspdf
4. install jspdf - now I install jspdf
5. npm run build - it built successfully!

So the solution for me was to remove references for any packages that may be the cause of the conflict, install everything else first, then install those other needed packages. This way the order of the dependencies that all packages need are using the best possible versions of the package.

Hopefully this will work for others.

[dushyantec71]

I am facing same issue, @salemhilal. Is there any update on this ?

[salemhilal]

@dushyantec71 the backscroll is helpful here. This isn't a problem with Webpack, but with NPM. You can either try and shuffle around your node_modules directory or you can migrate to yarn — unfortunately there aren't any other fixes. (I'm not a Webpack maintainer)

[Pike96]

I did "webpack": "^4.41.5", it solves the issue for me.
The actual webpack version installed is 4.43.0.

[weber]

ghghghghghg

[weber]

hjjhjhjhjhjhjhjhjh