Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Dbuggerx opened this issue Jan 20, 2019 · 171 comments

Comments

@Dbuggerx
Copy link

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
Copy link

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
Copy link

davidaq commented Jan 21, 2019

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

@gustavochavarria
Copy link

gustavochavarria commented Jan 21, 2019

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
Copy link

g-six commented Jan 21, 2019

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
Copy link
Contributor

lbogdan commented Jan 21, 2019

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

@ogheo
Copy link

ogheo commented Jan 21, 2019

Same on my side...

@sokra
Copy link
Member

sokra commented Jan 21, 2019

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

@sokra sokra changed the title Compilation issue, related to dynamic import Compilation issue, related to dynamic import (Parsing of import() fails in 4.29.0) Jan 21, 2019
@sokra sokra pinned this issue Jan 21, 2019
@sokra sokra changed the title Compilation issue, related to dynamic import (Parsing of import() fails in 4.29.0) Parsing of import() fails in 4.29.0 (Compilation issue, related to dynamic import) Jan 21, 2019
@Dbuggerx
Copy link
Author

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
Copy link

EvanBurbidge commented Jan 21, 2019

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
Copy link

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

@g-six
Copy link

g-six commented Jan 21, 2019

Workaround worked for me:
react & react-loader

@sokra
Copy link
Member

sokra commented Jan 21, 2019

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
Copy link

WhatIsSpark commented Jan 21, 2019

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
Copy link

@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
Copy link
Member

sokra commented Jan 21, 2019

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

@devCrossNet
Copy link

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

@bafxyz

This comment has been minimized.

msorens added a commit to chef/automate that referenced this issue Sep 20, 2019
webpack/webpack#8656 (comment)
Add acorn to package.json.

Signed-off-by: michael sorens <msorens@chef.io>
msorens added a commit to chef/automate that referenced this issue Sep 20, 2019
webpack/webpack#8656 (comment)
Add acorn to package.json.

Signed-off-by: michael sorens <msorens@chef.io>
msorens added a commit to chef/automate that referenced this issue Sep 25, 2019
webpack/webpack#8656 (comment)
Add acorn to package.json.

Signed-off-by: michael sorens <msorens@chef.io>
msorens added a commit to chef/automate that referenced this issue Sep 25, 2019
webpack/webpack#8656 (comment)
Add acorn to package.json.

Signed-off-by: michael sorens <msorens@chef.io>
msorens added a commit to chef/automate that referenced this issue Sep 29, 2019
webpack/webpack#8656 (comment)
Add acorn to package.json.

Signed-off-by: michael sorens <msorens@chef.io>
scottopherson pushed a commit to chef/automate that referenced this issue Oct 4, 2019
webpack/webpack#8656 (comment)
Add acorn to package.json.

Signed-off-by: michael sorens <msorens@chef.io>
msorens added a commit to chef/automate that referenced this issue Oct 7, 2019
* Remove incompatible npm package

Attempts to upgrade Angular reported that the "ngrx-tslint-oftype"
package was not compatible.
But this package was only needed for preparing a particular ngrx transition
between versions, so its work is done and it can be removed.

Signed-off-by: michael sorens <msorens@chef.io>

* `ng update` generated changes

Signed-off-by: michael sorens <msorens@chef.io>

* Reverted typescript from 3.5.3 to 3.4.5

The update of @angular/core failed because it found
3.5.3 -- that the upgrade had installed itself.
I edited the package.json from  ^3.4.5 to ~3.4.5
to keep it to 3.4.x, then npm install,
and it updated this package-lock.json.

Signed-off-by: michael sorens <msorens@chef.io>

* @ViewChild fixes

These are auto-generated from:
ng update @angular/core --from 7 --to 8 --migrate-only

Signed-off-by: michael sorens <msorens@chef.io>

* @angular/material fixes

These are auto-generated from:
ng update @angular/material --from 7 --to 8 --migrate-only

Signed-off-by: michael sorens <msorens@chef.io>

* Try to fix npm issue

webpack/webpack#8656 (comment)
Add acorn to package.json.

Signed-off-by: michael sorens <msorens@chef.io>

* Import fresh wallaby.js

Commit 060eccd8d6e72997b769e7ddb8570d50e310d43b
from https://github.com/wallabyjs/ngCliWebpackSample/o
dated 2019-07-09

Signed-off-by: michael sorens <msorens@chef.io>

* Re-apply Chef customization from old wallaby.js

Signed-off-by: michael sorens <msorens@chef.io>

* Import fresh wallaby.js (again)

After I submitted an issue, they updated the config file for Angular 8.
wallabyjs/public#2141

Signed-off-by: michael sorens <msorens@chef.io>

* Import fresh wallaby.js (one more time)

Wallaby team adjusted the config file again; this time it worked.
wallabyjs/public#2141

Signed-off-by: michael sorens <msorens@chef.io>

* Update angular-devkit deps

Signed-off-by: Scott Christopherson <scott@chef.io>

* Update router-store initialization

Signed-off-by: Scott Christopherson <scott@chef.io>

* Re-sync after rebase

* Minor fix

Signed-off-by: michael sorens <msorens@chef.io>

* Use the updated action types in routerReducer

ngrx/platform@466e2cd#diff-c0c42c418c07609d7feedc294175d164

* Configure route serializer via StoreRouterConnectingModule

Old way still works but the new way is how it's currently documented now and it requires less imports.

* Lint cleanup

Teardown the kludgy lint command needed to filter out
the deprecated deprecation (really!) of `select`.

Also suppress one essentially invalid lint complaint.

Signed-off-by: michael sorens <msorens@chef.io>

* Fix compile error in e2e (protractor) tests

Was getting this error:
e2e/compliance-reporting.e2e-spec.ts(2,10): error TS2305:
Module '"...e2e/helpers/accessibility_helpers"' has no exported member 'expectUrlToBeAccessible'.

Not clear what the problem was but this change fixed it

Signed-off-by: michael sorens <msorens@chef.io>

* Upgrade lots of npm packages

Ran `npm update` and got package updates shown.
Also includes just one code change needed to get a successful build.
All unit tests pass.

+ @angular/cdk@8.2.0
+ @angular/cli@8.3.5
+ @angular-devkit/core@8.3.5
+ @angular-devkit/schematics@8.3.5
+ @angular/forms@8.2.7
+ @angular/material@8.2.0
+ @angular/animations@8.2.7
+ @types/faker@4.1.5
+ @angular/platform-browser-dynamic@8.2.7
+ @angular/language-service@8.2.7
+ @angular/platform-browser@8.2.7
+ @angular/router@8.2.7
+ @angular/core@8.2.7
+ @angular/compiler@8.2.7
+ @types/jasminewd2@2.0.6
+ ajv@6.10.2
+ @types/lodash@4.14.138
+ codelyzer@5.1.1
+ axe-webdriverjs@2.3.0
+ d3@5.12.0
+ install@0.12.2
+ @types/node@10.14.18
+ core-js@2.6.9
+ karma-coverage-istanbul-reporter@2.1.0
+ karma-firefox-launcher@1.2.0
+ karma-jasmine-html-reporter@1.4.2
+ lodash@4.17.15
+ rxjs@6.5.3
+ moment@2.24.0
+ @angular/common@8.2.7
+ ngx-cookie@4.1.2
+ karma@3.1.4
+ @types/jasmine@2.8.16
+ tslib@1.10.0
+ sass-lint@1.13.1
+ tslint@5.20.0
+ rxjs-tslint@0.1.7
+ sniffr@1.2.0
+ tslint-defocus@2.0.6
+ wallaby-webpack@3.9.15
+ diff2html@2.11.3
+ @angular-devkit/build-angular@0.801.3
+ typescript@3.6.3
+ @angular/compiler-cli@8.2.7

added 397 packages from 78 contributors, removed 283 packages, updated 242 packages, moved 24 packages and audited 18418 packages in 134.542s

Signed-off-by: michael sorens <msorens@chef.io>

* More npm package updates

Signed-off-by: michael sorens <msorens@chef.io>

* and still more package updates

Signed-off-by: michael sorens <msorens@chef.io>

* Tighten version lock to patch only

@types/jasmine - generated error from `make unit`:
Per https://stackoverflow.com/a/57592510
need to wait for a patch

jasmine-core - just too new; came out yesterday! let's wait a bit on this one

tyepscript: generated error from `make server` that it needed angular < 3.6
so locking it at 3.5 until a later angular release

Signed-off-by: michael sorens <msorens@chef.io>

* Fix build warning

Warning message for the two SCSS files:
"start value has mixed support, consider using flex-start instead"

Signed-off-by: michael sorens <msorens@chef.io>

* Add reference comment

Signed-off-by: michael sorens <msorens@chef.io>

* Suppress ngrx runtime checks warnings

```
WARN: '@ngrx/store: runtime checks are currently opt-in but will be the default in the next major version with the possibility to opt-out, see https://ngrx.io/guide/migration/v8 for more information.'
```

Signed-off-by: Scott Christopherson <scott@chef.io>

* Suppress momentjs parse warning

```
WARN: 'Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.
```

The test is purposefully testing an invalid string passed to `moment`. The warning is expected.

Signed-off-by: Scott Christopherson <scott@chef.io>

* Suppress unhandled router promise warning

```
ERROR: 'Unhandled Promise rejection:', 'Cannot match any routes. URL Segment: 'projects/uuid-1'', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: Cannot match any routes. URL Segment: 'projects/uuid-1'
Error: Cannot match any routes. URL Segment: 'projects/uuid-1'
```

Signed-off-by: Scott Christopherson <scott@chef.io>

* Ensure ui-lib is installed w/ other dependencies

Unit tests fail to run if ui-lib assets are not installed.

```
ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find 'assets/chef-ui-library/chef/chef.css'
  in [
    /go/src/github.com/chef/automate/components/automate-ui/src
  ]
    at resolveModule.catch.catch (/go/src/github.com/chef/automate/components/automate-ui/node_modules/postcss-import/lib/resolve-id.js:35:13)
 @ ./src/styles.scss 1:14-241
 @ multi ./src/styles.scss
```

Signed-off-by: Scott Christopherson <scott@chef.io>

* Reduce unit test noise

WARN: 'Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?'

This was being generated by the following components:
 - ClientRunsComponent
 - ServiceGroupsComponent
 - ReportingComponent
 - HttpClientAuthInterceptor

The warning stems from this issue introduced by Angular 7:
angular/angular#25837

The first two components are fixed by this commit,
cutting the test "noise" in half.
Unfortunately applying the same fix to ReportingComponent
breaks several unit tests.
And I have not yet found the place to hook into to
fix HttpClientAuthInterceptor.

Signed-off-by: michael sorens <msorens@chef.io>

* One more pass of `npm update`

Have to move fast to keep on top of these changes.

This pass did these updates:
$ npm update
+ @angular-devkit/core@8.3.6
+ @angular/common@8.2.8
+ @angular/cdk@8.2.1
+ @angular/cli@8.3.6
+ @angular-devkit/schematics@8.3.6
+ @angular-devkit/build-angular@0.803.6
+ @angular/compiler-cli@8.2.8
+ @angular/language-service@8.2.8
+ @angular/platform-browser@8.2.8
+ @angular/core@8.2.8
+ @angular/platform-server@8.2.8
+ @angular/material@8.2.1
+ jasmine-core@3.5.0
+ @types/lodash@4.14.141
+ @angular/forms@8.2.8
+ @angular/platform-browser-dynamic@8.2.8
+ @types/node@10.14.19
+ @angular/router@8.2.8
+ codelyzer@5.1.2
+ @angular/compiler@8.2.8
+ @angular/animations@8.2.8

Signed-off-by: michael sorens <msorens@chef.io>

* Document package.json constraints

Certain few packages are specifically not updated
to their latest versions.
As package.json cannot contain comments,
I documented the reasons in the next best thing, the readme.

Signed-off-by: michael sorens <msorens@chef.io>

* Suppress ngZone warnings in reporting.component.spec

```
    applyParamFilters()
      ✔ parses multiple filters
      ✔ parses single filters
      ✔ parse interval
INFO: 'getEndDate calling router.navigate'
INFO: 'getEndDate calling router.navigate'
WARN: 'Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?'
WARN: 'Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?'
      ✔ parse bad end date
INFO: 'getDateInterval calling router.navigate'
INFO: 'getDateInterval calling router.navigate'
WARN: 'Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?'
WARN: 'Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?'
      ✔ parse invaild interval 2
INFO: 'getDateInterval calling router.navigate'
INFO: 'getDateInterval calling router.navigate'
WARN: 'Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?'
WARN: 'Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?'
      ✔ parse invaild interval 1
INFO: 'getDateInterval calling router.navigate'
INFO: 'getDateInterval calling router.navigate'
WARN: 'Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?'
WARN: 'Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?'
      ✔ parse bad interval
```

The `getEndDate` and `getDateInterval` methods call `router.navigate` which seems unexpected for methods that are named for getting and returning a value.

* Suppress ngZone warnings in service-groups.component.spec

Signed-off-by: Scott Christopherson <scott@chef.io>

* Suppress ngZone warnings in client-runs.component.spec

Signed-off-by: Scott Christopherson <scott@chef.io>

* Remove unused routing-helper

Ended up not needing it after refactoring specs to not rely on calling through `router.navigate`.

Signed-off-by: Scott Christopherson <scott@chef.io>
ish-xyz pushed a commit to ish-xyz/ish-ar.io that referenced this issue Dec 5, 2019
…#11640)

## Description

This addresses #11198.

There's a regression bug webpack/webpack#8656 affecting 4.29.0 through at least 4.29.3 which causes errors like this during `gatsby build`.

  Error: ./.cache/async-requires.js 8:11
  Module parse failed: Unexpected token (8:11)
  You may need an appropriate loader to handle this file type.
  | exports.components = {
  |   "component---frontend-components-main-js": function componentFrontendCompo  nentsMainJs() {
  >     return import("/home/circleci/project/frontend/components/main.js"
  |     /* webpackChunkName: "component---frontend-components-main-js" */
  |     );
   @ ./.cache/production-app.js 18:0-45 21:23-36 26:23-36

<!--
  Have any questions? Check out the contributing docs at https://gatsby.app/contribute, or
  ask in this Pull Request and a Gatsby maintainer will be happy to help :)
-->

## Related Issues

- Addresses #11198
- Related to webpack/webpack#8656
@salemhilal
Copy link

salemhilal commented Jan 7, 2020

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.

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
Copy link

kahanu commented Mar 12, 2020

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.

@dphilonoist
Copy link

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

@salemhilal
Copy link

@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
Copy link

Pike96 commented Jul 6, 2020

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

ef4 added a commit to embroider-build/ember-auto-import that referenced this issue Jul 18, 2020
We have been pinned to an older webpack for a while due to webpack/webpack#8656, which is really an NPM bug that gets tickled by the particular set of deps that come into play with webpack 4.29.

But we can't stay pinned forever. The [npm bug](https://npm.community/t/packages-with-peerdependencies-are-incorrectly-hoisted/4794/13) is effectively wontfix because NPM gets peerDeps wrong at a really deep level.

Hopefully enough other deps have shifted by now that the bug doesn't manifest often.
@weber
Copy link

weber commented Mar 3, 2021

ghghghghghg

@weber
Copy link

weber commented Mar 3, 2021

hjjhjhjhjhjhjhjhjh

leonhiat added a commit to leonhiat/gatsby-starter-blog that referenced this issue Oct 31, 2023
…#11640)

## Description

This addresses #11198.

There's a regression bug webpack/webpack#8656 affecting 4.29.0 through at least 4.29.3 which causes errors like this during `gatsby build`.

  Error: ./.cache/async-requires.js 8:11
  Module parse failed: Unexpected token (8:11)
  You may need an appropriate loader to handle this file type.
  | exports.components = {
  |   "component---frontend-components-main-js": function componentFrontendCompo  nentsMainJs() {
  >     return import("/home/circleci/project/frontend/components/main.js"
  |     /* webpackChunkName: "component---frontend-components-main-js" */
  |     );
   @ ./.cache/production-app.js 18:0-45 21:23-36 26:23-36

<!--
  Have any questions? Check out the contributing docs at https://gatsby.app/contribute, or
  ask in this Pull Request and a Gatsby maintainer will be happy to help :)
-->

## Related Issues

- Addresses #11198
- Related to webpack/webpack#8656
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests