vue-cli: dynamic import() Syntax makes webpack throw an error

Version

3.3.0

Reproduction link

https://github.com/DragosRocsoreanu/VueCreateExample/tree/master/src

Environment info

Environment Info:

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
  Binaries:
    Node: 10.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.17763.1.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2
    @vue/babel-preset-app:  3.3.0
    @vue/babel-preset-jsx:  1.0.0-beta.2
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2
    @vue/babel-sugar-inject-h:  1.0.0-beta.2
    @vue/babel-sugar-v-model:  1.0.0-beta.2
    @vue/babel-sugar-v-on:  1.0.0-beta.2
    @vue/cli-overlay:  3.3.0
    @vue/cli-plugin-babel: ^3.3.0 => 3.3.0
    @vue/cli-plugin-eslint: ^3.3.0 => 3.3.0
    @vue/cli-service: ^3.3.0 => 3.3.0
    @vue/cli-shared-utils:  3.3.0
    @vue/component-compiler-utils:  2.5.0
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    babel-plugin-transform-vue-jsx:  4.0.1
    eslint-plugin-vue: ^5.0.0 => 5.1.0
    vue: ^2.5.21 => 2.5.22
    vue-eslint-parser:  2.0.3
    vue-hot-reload-api:  2.3.1
    vue-loader:  15.5.1
    vue-router: ^3.0.1 => 3.0.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.5.22
    vue-template-es2015-compiler:  1.8.1
    vuex: ^3.0.1 => 3.1.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

vue create example
Select Lint,Vuex,Babel,Router
Select anything
CD example
npm run serve

What is expected?

To start the server and run normally

What is actually happening?

 INFO  Starting development server...
 98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                                                                                                                                                                                     11:18:18 PM
 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.10:8082/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Apparently if I use YARN I won’t have this issue, so it’s NPM related issue Problem is with Router!

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 28
Comments: 35 (8 by maintainers)

Commits related to this issue

fix: pin webpack version, fixes #3335 — committed to vuejs/vue-cli by sodatea 5 years ago

Most upvoted comments

revert webpack to v4.28 https://github.com/webpack/webpack/issues/8656

+16

Gorden-Wang on Jan 21, 2019

I can confirm this, doing simply yarn install fixes this

+14

michaeltintiuc on Jan 20, 2019

I can confirm the workaround in the webpack issue doesn’t work. What worked for me was “downgrading” to webpack@4.28.4 (be warned that this will add webpack as a direct dependency in package.json):

$ npm install webpack@4.28.4

lbogdan on Jan 21, 2019

UPDATE: Doesn’t seem to work after all

see @lbogdan’s comment below instead (https://github.com/vuejs/vue-cli/issues/3335#issuecomment-456060780)

Workaround

People using yarn seem to be unaffected.

For users of npm: According to https://github.com/webpack/webpack/issues/8656#issuecomment-456010969 this works:

npm update acorn --depth 20
npm dedupe

see the linked comment for an explantion of what’s going on.

LinusBorg on Jan 21, 2019

Just released @vue/cli-service 3.3.1 on npm to pin webpack version for now. We’ll try to find a long-term solution for this issue later.

sodatea on Jan 21, 2019

I can confirm that doing

rm -fr node_modules package-lock.json
npm install
npm run serve

fixes the issue.

lbogdan on Jan 21, 2019

same here. After upgrading to 3.3.0, my app is broken ☹️

shazha on Jan 21, 2019

I just bumped my project from webpack 3 to webpack 4, and met this problem. For me, the fix is install

npm install --save-dev @babel/plugin-syntax-dynamic-import

since before I was using babel-plugin-syntax-dynamic-import. Then, in .babelrc

{
      "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

yunhan0 on Jun 1, 2019

webpack v4.29.0 not support.

yesterday, run

vue create <project-name>

cd <project-name>
npm run serve

is error.

Module parse failed: Unexpected token (17: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');

today, run

vue create <project-name>

cd <project-name>
npm run serve

is ok.

compare package-lock.json,

error version

...
"webpack": {
      "version": "4.29.0",
      "resolved": "http://registry.npm.taobao.org/webpack/download/webpack-4.29.0.tgz",
     ...
}
...

ok version

...
"webpack": {
      "version": "4.28.4",
      "resolved": "http://registry.npm.taobao.org/webpack/download/webpack-4.28.4.tgz",
     ...
}
...

So, the vue-cli is compatible with the downgraded version of webpack.

You can do this

rm -fr node_modules package-lock.json
npm install
npm run serve

then see package-lock.json

...
"webpack": {
      "version": "4.28.4",
      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.28.4.tgz",
      ...
}
...

is work.

想问一下我路由是使用 (resolve) => { require([‘./components/stockAdjust/StockAdjustList’], resolve) }方式引入的，路由懒加载也有问题，首屏直接加载所有路由而不是，只加载用到的那一个。我已经把webpack设置为"4.28.4",了。为什么没有效果，还是首屏加载所有路由。没有懒加载

sunseekers on Mar 2, 2019

In the end I decided it was time to use yarn from now on.

mrsalitre on Jan 21, 2019

@LinusBorg workaround with npm didn’t seem to work.

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

EvanBurbidge on Jan 21, 2019

Any workaround suggestions?

abhishekbatra on Jan 21, 2019