Vue Router - Cannot Lazy Load Component - Unexpected Token

Question

I am trying to lazy load the Login component for my login login. When creating webpack, I get:

SyntaxError: Unexpected Token 

The Login.vue component works great if I import and assign it in the same way as on the home route.

I am puzzled because I believe that this code should work based on this blog .

The line that goes below:

 component: () => import('../components/Login.vue'), 

router.js

 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../components/Home.vue' Vue.use(VueRouter) export default new VueRouter({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home, meta: { permission: "anonymous", }, }, { path: '/login/', name: 'login', component: () => import('../components/Login.vue'), meta: { permission: "anonymous", }, }, ], }) 

package.json

 "dependencies": { "vue": "^2.3.4" }, "devDependencies": { "babel-core": "^6.25.0", "babel-eslint": "^7.2.2", "babel-loader": "^7.1.1", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.22.0", "cross-env": "^3.0.0", "css-loader": "^0.26.4", "eslint": "^3.12.2", "eslint-config-standard": "^6.2.1", "eslint-friendly-formatter": "^2.0.5", "eslint-loader": "^1.5.0", "eslint-plugin-html": "^1.7.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^2.0.1", "file-loader": "^0.9.0", "less": "^2.7.2", "less-loader": "^4.0.5", "style-loader": "^0.18.2", "uiv": "^0.11.4", "vee-validate": "^2.0.0-rc.7", "vue-acl": "^2.1.10", "vue-js-cookie": "^2.0.0", "vue-loader": "^13.0.2", "vue-quill-editor": "^2.2.4", "vue-resource": "^1.3.4", "vue-router": "^2.7.0", "vue-template-compiler": "^2.1.0", "vuex": "^2.3.1", "webpack": "^2.7.0", "webpack-bundle-tracker": "^0.2.0", "webpack-dev-server": "^2.5.1" } 

Compilation error screenshot

Answer 1

Your web package is not configured for specification! You have two ways to solve your problem!

The first one is to change the entire presence of import('path/to/component.vue') to System.import('path/to/component.vue')

And the second uses BABEL with the following configuration

.babelrc

 { "presets": [ ["es2015", { "modules": false }], "stage-2" ], "plugins": [ "transform-export-extensions" ] } 

Resources

ES6 Modules

Dynamic import

Stage 2 Babel Preset

Answer 2

With these dependency versions, you can use the following solution:

 "laravel-mix": "^2.1.11", "vue-router": "^3.0.1", component: (resolve) => { require(['../components/' + nameComponent + '.vue'], resolve); }