Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

lazy dynamic component import not working. #185

Open
anilwarbhe opened this issue Jul 2, 2020 · 5 comments
Open

lazy dynamic component import not working. #185

anilwarbhe opened this issue Jul 2, 2020 · 5 comments

Comments

@anilwarbhe
Copy link

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
Copy link

itsyub commented Jul 2, 2020

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

@anilwarbhe
Copy link
Author

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
Copy link

itsyub commented Jul 2, 2020

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
Copy link
Author

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
Copy link

En777 commented Dec 12, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants