dynamic import() Syntax makes webpack throw an error

[DragosRocsoreanu]

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!

[michaeltintiuc]

I can confirm this, doing simply yarn install fixes this

[lbogdan]

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]

@michaeltintiuc Strange, it works here when using yarn.

[michaeltintiuc]

@michaeltintiuc Strange, it works here when using yarn.

My bad, removed the comment

[JulCyan]

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]

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

[shazha]

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

[rolandgnm]

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]

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

[Gorden-Wang]

revert webpack to v4.28
webpack/webpack#8656

[dTalion]

eslint parses dynamic import incorrectly