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

Open
Dbuggerx opened this Issue Jan 20, 2019 · 76 comments

Comments

Projects
None yet
@Dbuggerx
Copy link

Dbuggerx commented Jan 20, 2019

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

This comment has been minimized.

Copy link

jonathanong commented Jan 21, 2019

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

This comment has been minimized.

Copy link

davidaq commented Jan 21, 2019

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

@gustavochavarria

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

ogheo commented Jan 21, 2019

Same on my side...

@sokra

This comment has been minimized.

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

This comment has been minimized.

Copy link
Author

Dbuggerx commented Jan 21, 2019

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

BigBuckBunny commented Jan 21, 2019

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

@g-six

This comment has been minimized.

Copy link

g-six commented Jan 21, 2019

Workaround worked for me:
react & react-loader

@sokra

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

EvanBurbidge commented Jan 21, 2019

@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

This comment has been minimized.

Copy link
Member

sokra commented Jan 21, 2019

@devCrossNet

This comment has been minimized.

Copy link

devCrossNet commented Jan 21, 2019

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

mlippert added a commit to rifflearning/riff-rtc that referenced this issue Jan 21, 2019

update packages (lock webpack at 4.28.4 for now)
Webpack 4.29.0 has an issue see webpack/webpack#8656
Unlock webpack once it's fixed.

@tomlinton tomlinton referenced this issue Jan 21, 2019

Merged

Add acorn as explicit dependency #1269

1 of 5 tasks complete
@bafxyz

This comment was marked as spam.

Copy link

bafxyz commented Jan 21, 2019

Same here, downgrade the easiest solution so far

@semoal

This comment has been minimized.

Copy link

semoal commented Feb 9, 2019

In my case rolling back to 4.28.4 doesn't fix the problem.
I did a little .js that get's executed every time someone installs the project for first time. I share it.

const { exec } = require('child_process');

exec('npm i acorn && npm update acorn --depth 20 && npm dedupe', (error, stdout, stderr) => {
  console.log(`stdout: ${stdout}`);
  console.log(`stderr: ${stderr}`);
  if (error !== null) {
    console.log(`exec error: ${error}`);
  }
});

I hope this issue gets fixed soon.

@zural

This comment has been minimized.

Copy link

zural commented Feb 10, 2019

@akonyer

This comment has been minimized.

Copy link

akonyer commented Feb 11, 2019

I'm getting the same issue. Downgrading webpack resolved this issue.

@mvirbicianskas

This comment has been minimized.

Copy link

mvirbicianskas commented Feb 12, 2019

same issue, downgrading to 4.28.0 resolves the issue. I guess we'll have to wait for proper fix :/

@wbern

This comment has been minimized.

Copy link

wbern commented Feb 12, 2019

@mvirbicianskas

This comment has been minimized.

Copy link

mvirbicianskas commented Feb 12, 2019

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

@wbern

This comment has been minimized.

Copy link

wbern commented Feb 12, 2019

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

@worc

This comment has been minimized.

Copy link

worc commented Feb 13, 2019

@wbern ideally there wouldn't be a [potentially misleading] workaround. requiring acorn at the top level isn't actually an accurate representation of our projects. in the mean time, yarn seems to not have this hoisting bug and is another potential workaround.

@wbern

This comment has been minimized.

Copy link

wbern commented Feb 13, 2019

@worc I'm happy that there's a workaround for now, it not being self-explanatory is not too good though I guess.

adamhooper added a commit to CJWorkbench/cjworkbench that referenced this issue Feb 13, 2019

Fix Webpack 4.29 issue with dynamic imports
webpack/webpack#8656 -- basically, I had to
wipe our package-lock.json and install acorn.

Let's nix acorn when we can.

gurpreet-hanjra added a commit to gurpreet-hanjra/gatsby that referenced this issue Feb 14, 2019

fix(gatsby): pin webpack to fix unexpected token error during build (g…
…atsbyjs#11640)

## Description

This addresses gatsbyjs#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 gatsbyjs#11198
- Related to webpack/webpack#8656

czy88840616 added a commit to midwayjs/injection that referenced this issue Feb 15, 2019

czy88840616 pushed a commit to midwayjs/injection that referenced this issue Feb 15, 2019

Auto Doc Publisher
@jimmykane

This comment has been minimized.

Copy link

jimmykane commented Feb 15, 2019

Hi, what issue and at what repo should I follow to know when this is fixed?
I would not add any other dependency on my project.

Or the clean solution to to migrate to YARN ?

@worc

This comment has been minimized.

Copy link

worc commented Feb 15, 2019

@jimmykane the issue seems to have been a dependency hoisting bug in npm. npm@6.8.0 seems to have fixed it, but you have to remove node_modules and any lock files before you reinstall.

@jimmykane

This comment has been minimized.

Copy link

jimmykane commented Feb 15, 2019

@worc ah thanks because I was following the NPM issue saw it was closed, then I updated NPM to 6.8.0 but again I did have a crash. I am going to try it now and see what happens.

Thanks for your reply. Its appreciated

@jimmykane

This comment has been minimized.

Copy link

jimmykane commented Feb 15, 2019

I don't know what I am doing wrong:

I updated to npm 6.8.0

  • Deleted package.json
  • Removed node modules
  • Updated deps
  • Installed deps

I get

ERROR in ./node_modules/@amcharts/amcharts4/.internal/core/responsive/Responsive.js 418:15
Module parse failed: Unexpected token (418:15)
You may need an appropriate loader to handle this file type.
|      */
|     Responsive.prototype.loadDefaultRules = function () {
>         return import(/* webpackChunkName: "responsivedefaults" */ "./ResponsiveDefaults");
|     };
|     return Responsive;
ERROR in ./node_modules/@amcharts/amcharts4/.internal/core/export/Export.js 64:24
Module parse failed: Unexpected token (64:24)
You may need an appropriate loader to handle this file type.
|             switch (_a.label) {
|                 case 0: return [4 /*yield*/, Promise.all([
>                         import(/* webpackChunkName: "pdfmake" */ "pdfmake/build/pdfmake.js"),
|                         import(/* webpackChunkName: "pdfmake" */ "../../pdfmake/vfs_fonts")
|                     ])];

I might try YARN this NPM stuff to be honest dont feel good with deleting modules etc.

@glen-84

This comment has been minimized.

Copy link

glen-84 commented Feb 15, 2019

@jimmykane

This comment has been minimized.

Copy link

jimmykane commented Feb 15, 2019

@glen-84 got lost there. So the 6.8.0 pre fix was reverted. Okey.....

@glen-84

This comment has been minimized.

Copy link

glen-84 commented Feb 15, 2019

@sokra Perhaps you should edit the OP with your workarounds from this comment? (it's buried now)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment