dynamic import() Syntax makes webpack throw an error #3335

DragosRocsoreanu · 2019-01-20T21:20:53Z

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!

The text was updated successfully, but these errors were encountered:

michaeltintiuc · 2019-01-20T22:13:51Z

I can confirm this, doing simply yarn install fixes this

lbogdan · 2019-01-20T22:57:48Z

Looked at it a bit, seems to be an acorn issue, it fails to parse this code ( with Unexpected token error because of import):

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
Vue.use(Router);
export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [{
    path: "/",
    name: "home",
    component: Home
  }, {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: function component() {
      return import(
      /* webpackChunkName: "about" */
      "./views/About.vue");
    }
  }]
});

at https://github.com/webpack/webpack/blob/master/lib/Parser.js#L2233 . Maybe related to webpack/webpack@ef67132 .

I failed to found the difference between npm and yarn package versions, though.

lbogdan · 2019-01-20T23:45:45Z

@michaeltintiuc Strange, it works here when using yarn.

michaeltintiuc · 2019-01-21T00:00:33Z

@michaeltintiuc Strange, it works here when using yarn.

My bad, removed the comment

JulCyan · 2019-01-21T03:13:04Z

I have the same problem

Now I can remove node_modules without having a problem using cnpm or yarn installation dependencies, but this is only a temporary solution

wanwan1219 · 2019-01-21T03:39:01Z

I have the same problem.The node version and the vue version is the same as you

shazha · 2019-01-21T04:07:03Z

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

rolandgnm · 2019-01-21T04:41:27Z

Having the same issue here. Looking at vue-router docs there is:

_
I followed the instructions, added the babel plugin but couldn't make the app run.

Edit:
It may look obvious but suppressing the import() statement and importing the component directly, as follows:

import About from './views/About.vue';
...
component: About,

will make it work.

The annoying part is that you'll be overriding initial config without writing your first line in the new project.

What looked a bit weird to me is in babel config file. You're gonna see:

module.exports = {
  presets: [
    '@vue/app',
  ],
};

but I could not find a npm package with name @vue/app.

kingdee88 · 2019-01-21T05:35:59Z

the same problem with me, it works when using npm has this error

Gorden-Wang · 2019-01-21T06:27:19Z

revert webpack to v4.28
webpack/webpack#8656

dTalion · 2019-01-21T06:53:19Z

eslint parses dynamic import incorrectly

SilvaQ · 2019-01-21T08:36:44Z

the same problem with me (macbook pro mojave),
vue-cli 3.3.0
system info:

error info

lbogdan · 2019-01-21T09:55:50Z

Looks like an npm hoisting issue after all: webpack/webpack#8656 (comment) .

abhishekbatra · 2019-01-21T11:48:06Z

Any workaround suggestions?

EvanBurbidge · 2019-01-21T12:03:34Z

Just started hitting this now, import Component from './ComponentPath.vue' is fine, seems to just be the lazy loading syntax that's broken.

LinusBorg · 2019-01-21T12:25:36Z

UPDATE: Doesn't seem to work after all

see @lbogdan's comment below instead (#3335 (comment))

Workaround

People using yarn seem to be unaffected.

For users of npm: According to webpack/webpack#8656 (comment) this works:

npm update acorn --depth 20
npm dedupe

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

EvanBurbidge · 2019-01-21T12:38:58Z

@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

lbogdan · 2019-01-21T12:40:33Z

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

abhishekbatra · 2019-01-21T12:45:25Z

Yes, downgrading webpack to 4.28.4 seems to have worked for me as well.

broady02 · 2019-01-21T16:25:36Z

TL;DL
This works for me:
$ npm install -D webpack@4.28.4

Apparent Issue
After new projects working yesterday, today a new project had this error:

A git diff on package-lock.json shows some changes of interest:

webpack version is now 4.29.0 from 4.28.4
acorn version is now 6.0.5 from 5.7.3
acorn-dynamic-import version is now 4.0.0 from 3.0.0

Seems to me like the new dynamic import version is not playing nicely - it was a major version update to be fair.

lbogdan · 2019-01-21T16:55:41Z

@broady02 The root cause is an npm issue, it was filed here: https://npm.community/t/packages-with-peerdependencies-are-incorrectly-hoisted/4794 .

sodatea · 2019-01-21T17:00:03Z

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.

lbogdan · 2019-01-21T17:09:58Z

I can confirm that doing

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

fixes the issue.

broady02 · 2019-01-21T17:18:03Z

New projects working as expected, Thankyou!

mrsalitre · 2019-01-21T19:22:51Z

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

gustavochavarria · 2019-01-22T02:34:50Z

The solution, work for me. I do:

rm -irf node_modules package-lock.json
npm update acorn --depth 20
npm dedupe
npm install
npm run serve

Thanks

JiaLe1 · 2019-01-22T03:36:41Z

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.

iTaster · 2019-02-22T06:30:40Z

Encounter the same problem

sunseekers · 2019-03-02T14:49:07Z

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",了。为什么没有效果，还是首屏加载所有路由。没有懒加载

bling0390 · 2019-05-22T06:25:57Z

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

it works for me. thanks

yunhan0 · 2019-06-01T10:49:37Z

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"]
}

AlbertMarashi · 2019-06-20T12:53:53Z

@yunhan0 facing similar issue. I'm rolling out my own webpack configs, but dynamic imports are not working. What can I do?

yunhan0 · 2019-06-21T00:44:41Z

@DominusVilicus Did you change dynamic import plugin from babel-plugin-syntax-dynamic-import to @babel/plugin-syntax-dynamic-import?

AlbertMarashi · 2019-06-21T02:11:23Z

I found my issue.

I was using target: 'async-node' in the webpack config instead of target: 'node'

AlbertMarashi · 2019-06-21T02:12:19Z

            {
                test: /\.js$/,
                loader: 'babel-loader',
                options: {
                    plugins: ['@babel/plugin-syntax-dynamic-import']
                }
            }

as module rule

and ensure the target for server build is target: 'node'

lbogdan mentioned this issue Jan 20, 2019

Failed generator invoking #3309

Closed

terry90918 mentioned this issue Jan 21, 2019

最新的cli无法使用路由懒加载 #3337

Closed

LinusBorg added upstream scope: cli-service serve labels Jan 21, 2019

LinusBorg mentioned this issue Jan 21, 2019

使用vue cli3 @3.3.0 生成的项目运行报错 vuejs/vue#9348

Closed

LinusBorg pinned this issue Jan 21, 2019

sodatea added the priority: now label Jan 21, 2019

LinusBorg changed the title ~~NPM "create vue project" (with router) - server not starting~~ dynamic import() Syntax makes webpack throw an error Jan 21, 2019

LinusBorg mentioned this issue Jan 21, 2019

vue-cli3.3.0 不能配合vuepress 0.14.8以上版本工作 #3341

Closed

xidedix mentioned this issue Jan 21, 2019

dynamic import() - webpack throws an error coreui/coreui-free-vue-admin-template#150

Closed

sodatea mentioned this issue Jan 21, 2019

Doesn't work with webpack v4.29.0 vuejs/vue-loader#1476

Closed

philstavri mentioned this issue Jan 21, 2019

npm run serve results in an error due to lazy loading syntax in the router.js file generated by vue cli #3344

Closed

sodatea added a commit that referenced this issue Jan 21, 2019

fix: pin webpack version, fixes #3335

1af421e

sodatea unpinned this issue Jan 29, 2019

sodatea closed this as completed in 0a0a65f Jan 30, 2019

dynamic import() Syntax makes webpack throw an error #3335

dynamic import() Syntax makes webpack throw an error #3335

Comments

DragosRocsoreanu commented Jan 20, 2019 • edited

Version

Reproduction link

Environment info

Steps to reproduce

What is expected?

What is actually happening?

michaeltintiuc commented Jan 20, 2019

lbogdan commented Jan 20, 2019 • edited

lbogdan commented Jan 20, 2019 • edited

michaeltintiuc commented Jan 21, 2019

JulCyan commented Jan 21, 2019 • edited

wanwan1219 commented Jan 21, 2019

shazha commented Jan 21, 2019

rolandgnm commented Jan 21, 2019 • edited

kingdee88 commented Jan 21, 2019 • edited

Gorden-Wang commented Jan 21, 2019

dTalion commented Jan 21, 2019

SilvaQ commented Jan 21, 2019

lbogdan commented Jan 21, 2019 • edited

abhishekbatra commented Jan 21, 2019

EvanBurbidge commented Jan 21, 2019

LinusBorg commented Jan 21, 2019 • edited

UPDATE: Doesn't seem to work after all

Workaround

EvanBurbidge commented Jan 21, 2019

lbogdan commented Jan 21, 2019 • edited

abhishekbatra commented Jan 21, 2019

broady02 commented Jan 21, 2019 • edited

lbogdan commented Jan 21, 2019

sodatea commented Jan 21, 2019

lbogdan commented Jan 21, 2019

broady02 commented Jan 21, 2019

mrsalitre commented Jan 21, 2019

gustavochavarria commented Jan 22, 2019 • edited

JiaLe1 commented Jan 22, 2019

iTaster commented Feb 22, 2019

sunseekers commented Mar 2, 2019

bling0390 commented May 22, 2019

yunhan0 commented Jun 1, 2019

AlbertMarashi commented Jun 20, 2019

yunhan0 commented Jun 21, 2019

AlbertMarashi commented Jun 21, 2019

AlbertMarashi commented Jun 21, 2019

DragosRocsoreanu commented Jan 20, 2019 •

edited

lbogdan commented Jan 20, 2019 •

edited

lbogdan commented Jan 20, 2019 •

edited

JulCyan commented Jan 21, 2019 •

edited

rolandgnm commented Jan 21, 2019 •

edited

kingdee88 commented Jan 21, 2019 •

edited

lbogdan commented Jan 21, 2019 •

edited

LinusBorg commented Jan 21, 2019 •

edited

lbogdan commented Jan 21, 2019 •

edited

broady02 commented Jan 21, 2019 •

edited

gustavochavarria commented Jan 22, 2019 •

edited