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

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

The npm bug report got an answer:

zkat Kat Marchán npm CLI & Community Architect This is a known issue and, unfortunately, something we won’t be able to fix until we get through an upcoming tree builder rewrite. peerDeps require a bit of extra attention to get right, and the current installer architecture can’t support this (this has been a known bug since npm@3!)

Seem like the bug won’t get fixed soon. Here are workarounds to you can use:

• add "acorn": "^6.0.5" to your application package.json.
• Switch to yarn. It doesn’t have this bug.
• npm update acorn --depth 20 npm dedupe (works only in some cases)
• rm package-lock.json npm i (works only in some cases)
• update all other packages that depend on a older version for acorn (works only in some cases)
• lock webpack at 4.28.4 in your package.json

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'),

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

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

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

these magic incantations workarounds are getting more creative every day

After doing what was in https://github.com/webpack/webpack/issues/8656#issuecomment-473418654, I was able to remove the acorn dependency and it all still works. Looks like it has to do with package-lock.json.

So, in all:

npm install --save-dev acorn
npm dedupe
npm uninstall acorn

For people still running in this error (found this solution in one of above comments, but removing lock-files was what worked for me):

• Install Webpack 4.30.0 (no reason to use older version if this works)

• npm i --save-dev acorn@^6.1.1

• Make Webpack resolve to newer acorn; add this at end of your package.json:

"resolutions": {
  "webpack/acorn": "6.1.1"
}

• Delete your node_modules and package-lock.json and yarn-lock.json (if using yarn).
• Run npm i.

And it should work after this.

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?

Here’s what worked for us in our Ionic v4/Angular app after trying the various work arounds to no avail:

• Added acorn to devDependencies.
• Deleted node_modules.
• Deleted package-lock.json.
• npm install.
• npm ls acorn showed the webpack dependency on acorn and everything listed that depended on acorn had its dependency successfully met.
• After committing changes, we then updated the direct dependencies that depended at some point on acorn (npm ls acorn). The main one that needed updating was @ionic/storage. After bumping the version, removing the acorn dev dependency, npm install, things not only functioned but npm ls acorn looked good and @ionic/storage was no longer listed (for whatever reason).

hjjhjhjhjhjhjhjhjh

ghghghghghg

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.

@hai5nguy
“webpack”: “~4.34.0”, “webpack-cli”: “3.3.4”, “acorn”: “^6.1.1”,

rm -rf package-lock.json rm -rf node_modules npm i

worked for me

I don’t suppose it’s your intention to keep confirmed breaking changes in minor or patch versions, so are you considering making a minor/patch version where you revert the breaking change (acorn v6)

Reverting the change would be a breaking change for users that are not affected by the npm bug.

I would prefer to fix the bug in npm, so I’m working on a PR to npm cli: https://github.com/npm/cli/pull/147

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

https://npm.community/t/release-npm-6-8-0-next-0/5058

There is a beta npm version including the fix.

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.

this is a major issue, why isnt that already fixed ?

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

Confirmed solution that worked for me:

"webpack": "~4.34.0", "webpack-cli": "3.3.4", "acorn": "^6.1.1",

rm -rf package-lock.json rm -rf node_modules npm i

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

Due to acorn plugin is now integrated into acorn itself, this npm issue is no longer an issue for webpack. Note that the npm problem is still not solved and could re-occur anytime again.

@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

this bug doesnt exist anymore as 4.36.0, try : “webpack”: “4.36.0”, “webpack-cli”: “3.3.6”, “webpack-dev-server”: “3.7.2”

You can upvote this PR if you want to show your interest in the fix: https://github.com/npm/cli/pull/147

@sokra I don’t suppose it’s your intention to keep confirmed breaking changes in minor or patch versions, so are you considering making a minor/patch version where you revert the breaking change (acorn v6), so we’re not forced to pin our version of webpack to 4.28.4?

my bad, did a clean install but forgot to delete package-lock.json. after cleaning that it indeed works,

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

It is work.

I was encountering the same issue even after trying the above-mentioned steps. The following did the trick for me to resolve the issue for my setup which has babel and webpack.

In addition to performing the steps mentioned in https://github.com/webpack/webpack/issues/8656#issuecomment-456086484 Try the following if you are using Babel and Webpack:

• Install “babel-plugin-dynamic-import-node”: npm i -D babel-plugin-dynamic-import-node
• Added the dynamic-import-node option in babel configuration

"plugins": [
    ... ,
    "dynamic-import-node"    
]

Note: I’m using babel 7.3.0 with webpack

If its still doesnt work then going back to webpack 4.28.x is the last option

that’s less of a solution and more of a workaround. and i only want to call it out as a workaround because it feels like the kind of cruft that quickly becomes tech debt. in a few days or weeks you’ll be asking yourself why did you do this non-standard thing. if you know the why you’ll still be asking if you’ve implemented it in all the necessary places. and if you have implemented it, then you’ll have to wonder if the workaround is still necessary. and if it is, then you’ll ask what timeline you should expect to move away from it 🙄

the core issue is still peer dependency resolution within npm itself, and until that’s resolved, there’s really no solution 😞

the other workarounds are downgrade webpack, use yarn, install acorn as a direct dependency, or use the npm release candidate that had the fix before it was reverted.

Adding acorn@^6.0.7 to the project’s dependencies, removing package-lock.json and node_modules and then reinstalling did the trick for me. 😃

o my god, i spend many hours on this problem TTTTTTT

Fix is scheduled for next npm release.

Will the npm fix effectively mean that in order to upgrade to 4.29.0 (without “hacks”), users will have to use a newly-released version of npm?

Yes

If so, would that be considered a BC break (not being compatible with older versions of npm)?

No, I don’t see a reason why someone should be unable to update their npm version to upgrade webpack. Note that afaik you only need to latest npm version to upgrade webpack. This should result in a correct lockfile which is installable with older version. As long as you don’t run npm dedupe which an old version you are fine.

But I’ll add a note to the release notes.

Wasted my working day trying to figure out why it’s because of the new version thx 😩

@PerspectivesLab It’s actually as of 4.35.3:

upgrading to 10 won’t work, there is a bug in npm. you just need to add latest version of acorn to your package.json. As far as I can tell, deps won’t be upgraded for webpack 4, all resources to 5 (correct me if I’m wrong)

That also worked for me. After adding the latest acorn to devDependencies, you would either need to delete the package.lock.json or run npm dedupe after npm i.

I had to include the "acorn": "6.1.1" into devDependencies with Webpack 4.29.0 and NPM. Then you have to delete the lock file or run npm dedupe for the Webpack not to fail.

FWIW I had the same problem, but it worked fine locally on Mac but failed on Jenkins (with version 4.29), reverting to 4.28.4 fixed it 👍

aye, it works like this, but that’s not optimal, imo, since we don’t use the acorn dep in the project explicitly, so there shouldn’t be a need to define the dep in package.json

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

This helped a lot, @devCrossNet

Installing acorn@6.1.0 and acorn-dynamic-import@4.0.0 worked for me.

npm i --save-dev acorn@6.1.0 acorn-dynamic-import@4.0.0

Thanks!!!

❤️ I also got this issue today, probably after upgrading packages. I lost a few hours trying to figure out what the hell has happened…

Adding "acorn": "^6.0.7" to package.json solved this issue for me when using yarn without downgrading webpack (I am using 4.29.0).

Note: It’s hard to find a solution to this issue, as searching leads to older discussions about @babel/syntax-dynamic-import issues (or anything related to import() being a proposal API) that were already solved in late 2018.

is there any solution yet for this (aside from downgrading)?

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

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

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.

good catch, i also had trouble with 4.35.3 like @tzetzo, but the update to 4.36.0 definitely fixed all of it, @tzetzo could you update to 4.36.0 and let us know if it fixes your issue

https://github.com/acornjs/acorn/issues/824#issuecomment-508368092

@rbasniak Try adding "acorn": "^6.1.1" to the "dependencies" in your package.json, and then do npm install.

Alternatively, you can switch to yarn.

upgrading to 10 won’t work, there is a bug in npm. you just need to add latest version of acorn to your package.json. As far as I can tell, deps won’t be upgraded for webpack 4, all resources to 5 (correct me if I’m wrong)

Is there a fix for this that doesn’t rely on downgrading to 4.28.2? There’s a feature in 4.32.0 that I’d like to take advantage of and any help would be much appreciated.

Running the following commands didn’t fix the issue for me

npm update acorn --depth 20
npm dedupe

Running npm ls acorn returns

├─┬ regenerator@0.14.1
│ └─┬ commoner@0.10.8
│   └─┬ detective@4.7.1
│     └── acorn@5.7.3 
└─┬ webpack-bundle-analyzer@3.3.2
  └── acorn@6.1.1 

Addings of dynamic-import-node-babel-7 plugin works fine for the latest version of wedkpack. For react you can additionally add react-loadable/babel as well.

in webpack.config.js add plugins: [ "@babel/plugin-proposal-class-properties", "@babel/syntax-dynamic-import", // For code splitting "react-loadable/babel", "dynamic-import-node-babel-7", ],

@bogem I believe that is a regression in the @babel/parser in ^7.40 : babel/babel#9763 I’ve used a yarn resolution to avoid the latest version: @babel/parser": "7.3.4"

@JoshRobertson I saw that too and am still seeing the mentioned error with both “@babel/parser” and “acorn” resolutions.

Already spent some hours debugging the problem. I’ll try to create a minimal reproduction.

@bogem

I believe that is a regression in the @babel/parser in ^7.40 : https://github.com/babel/babel/issues/9763

I’ve used a yarn resolution to avoid the latest version: @babel/parser": "7.3.4"

@korya yeah, using yarn is a viable workaround. adding acorn as a direct dependency is another one.

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

It worked for me, too.

@chandan-singh That’s for running in a Node environment, to transpile import to require. In Webpack you’d want, dynamic import syntax, because Wepback will use internal Promises for the dynamic imports.

@mvirbicianskas contributing here means we’d like to know how the workarounds work for you also. 🙂

Thanks for your work @sokra

@carrillo455 yes, you can blow away your lockfile or scroll up and you will see a fix.

npm update acorn --depth 20 npm dedupe

I also had to downgrade to 4.28.4. I wasted 2 days on this, thinking there was a babel issue… Please fix this ASAP. I’d hate to have to lock myself down on this one version. Fixing the acorn peer-dependency didn’t help.

WHY DID YOU MARK THIS AS SPAM?! I’m serious, I spent 2 days banging my head against the wall trying to understand how this upgrade wasn’t working when the upgrade I did on a different repo a few months back worked just fine… Obviously, you aren’t wanting anymore embarrassment about how badly this breaks some users

adding “acorn”: “^6.0.5” to package json didn’t work for me, still same error only 4.28.4 works

Hey @sokra, I’ve ended up deleting package-lock.json and node_modules, then npm i and it’s working again! I’ve also experimented reverting this fix, and tried yarn, which also fixes the issue as well. Thanks for the detailed information!

Downgrading did work from 4.30.0 to 4.28.4, but upgrading to 4.35.3 also works.

we used lerna and came across this problem also, in the end we added "acorn": "6.1.1", as dependency and it worked with "webpack": "^4.30.0",

hope it helps

Going to link back to the post by @KevinKelchen as a workaround since it’s pretty buried now

https://github.com/webpack/webpack/issues/8656#issuecomment-473418654

Your problem is not with dynamic import. It is the issue of less or scss loader (or whatever script you are using). Please add a proper loader for your code.

@Jaskaranbir Yeah that worked for me. 🙏

A similar issue exists with Typescript exports where switching to Yarn does NOT solve the problem. Exporting a TS interface errors (while the export of the module does not).

Yarn 1.15.2 Webpack 4.29.6 Typescript 3.4

interface AvatarProps {
 user: object;
}

const Avatar: FC<AvatarProps> = props => {
  //snip
  return (...);
};

export { Avatar, AvatarProps };

generates

ERROR in components/Avatar.tsx 24:17
Module parse failed: Export 'AvatarProps' is not defined (24:17)
You may need an appropriate loader to handle this file type.
| };
|
> export { Avatar, AvatarProps };

pinning acorn to 6.0.5 with yarn resolutions is required for this code to compile:

  "resolutions": {
    "webpack/acorn": "6.0.5"
  }

Thanks, @KevinKelchen. That solved the problem. Initially I thought maybe I had a broken change show up. I was going through all of my config files trying to solve it.

Had this issue as well. @KevinKelchen – Your solution worked for me too.

Another solution may be to update all dependencies relying on acorn so that they depend on the latest (6.x) version. For my project, it was only webpack and webpack-bundle-analyzer (which has recently been updated).

Run npm ls acorn.

This is my output after updating both:

+-- webpack@4.29.6
| `-- acorn@6.1.1
`-- webpack-bundle-analyzer@3.1.0
  `-- acorn@6.1.1

A simple fix for this to remove package-lock.json & node modules. And then run npm install. In my case, that problem was coming because of updation of acorn dependency.

terrible