lazy dynamic component import not working.

[anilwarbhe]

Why dynamic component import in router throwing error?

ERROR in ./src/routes.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (24:33)

  22 |     async(routeTo, routeFrom, resolve, reject) {
  23 |       // dynamic import component; returns promise
> 24 |       const vueComponent = () => import('./assets/vue/pages/about.vue');
     |                                  ^
  25 |       // resolve promise
  26 |       vueComponent().then((vc) => {
  27 |         // resolve with component

 @ ./src/main.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--6!./node_modules/vue-loader/lib??vue-loader-options!./src/main.vue?vue&type=script&lang=js&) 9:14-36
 @ ./src/main.vue?vue&type=script&lang=js&
 @ ./src/main.vue
 @ ./src/main.js

[itsyub]

You can use const vueComponent = await import('./assets/vue/pages/about.vue');

[anilwarbhe]

ERROR in ./src/routes.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: await is a reserved word (563:27)

561 | async(routeTo, routeFrom, resolve, reject) { 562 | // dynamic import component; returns promise

563 | const vueComponent = await import('./assets/vue/pages/about.vue'); | ^ 564 | // const vueComponent = () => import('./assets/vue/pages/aboutus.vue'); 565 | // resolve promise 566 | vueComponent().then((vc) => {

@ ./src/main.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--6!./node_modules/vue-loader/lib??vue-loader-options!./src/main.vue?vue&type=script&lang=js&) 23:14-36 @ ./src/main.vue?vue&type=script&lang=js& @ ./src/main.vue @ ./src/main.js

[itsyub]

it seems you haven't installed babel-preset-env package. Revert to const vueComponent = () => import('./assets/vue/pages/about.vue'); and run npm install --save-dev babel-preset-env to install package and create file .babelrc with following content.

 {
  "presets": ["env"]
} 

i think this will fix the babel compiling error.

[anilwarbhe]

babel-preset-env is already installed as I am using THIS template. It's there in json file. But as you mentioned I have created a .babelrc file and copied the content you had asked but still receiving the same error.

[En777]

I fix it:

\config\webpack.common.js loader: 'babel-loader' add plugin: 'syntax-dynamic-import'

then: npm install babel-plugin-syntax-dynamic-import@6.18.0 -D

Unexpected token webpack import() error will be ok.