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 [email protected] -D

Unexpected token webpack import() error will be ok.