Vue router - cannot lazy load component - Unexpected Token

Question

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

SyntaxError: Unexpected Token

The Login.vue component works fine if I import and assign it the same way I do the Home route.

I'm baffled because I believe this code should work based on this blog.

The line that fails below is:

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"
}

Screenshot of compilation error

Sorry, for the delay. I had to attend to crying baby. The double edged sword of working from home :-) — pymarco
– pymarco, Commented Jul 20, 2017 at 16:33
I've expanded my original question with package.json details. Webpack version 2.7.0 — pymarco
– pymarco, Commented Jul 20, 2017 at 16:34
@pymarco Can you add more details about this SyntaxError: Unexpected Token? At this time we don't know if it is or not actually came from your router.js file! — Ivan Vilanculo
– Ivan Vilanculo, Commented Jul 20, 2017 at 17:50

Ivan Vilanculo · Accepted Answer · 2017-07-20 18:29:10Z

11

Your webpack is not configured the spec! Só there are two ways to solve your problem!

The first one is to change all occurence of import('path/to/component.vue') to System.import('path/to/component.vue')

And the second is using BABEL with the folowing configuration

.babelrc

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

Resources

ES6 Modules

Dynamic Import

Stage-2 Babel Preset

edited Jul 20, 2017 at 18:29

answered Jul 20, 2017 at 18:22

Ivan Vilanculo

6681 gold badge11 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

pymarco Over a year ago

Thank you. Both approaches worked. I have created a .babelrc file, except I removed the "plugins" part. Cheers

Tadas Stasiulionis Over a year ago

That works, but how do you group components when it is System.import('./components/Component.vue')?

Ivan Vilanculo Over a year ago

@Tadas could you explain a bit more about your question?

Daniel Over a year ago

Thanks to this answer I removed babel and fixed my problem :)

sparkitny · Accepted Answer · 2018-04-04 04:59:53Z

1

The following solution can be used with these versions of dependencies:

"laravel-mix": "^2.1.11", 
"vue-router": "^3.0.1",

component: (resolve) => { require(['../components/' + nameComponent + '.vue'], resolve); }

edited Apr 4, 2018 at 4:59

sparkitny

1,5434 gold badges19 silver badges23 bronze badges

answered Apr 3, 2018 at 22:48

Wiicho Orozco

5861 gold badge5 silver badges9 bronze badges

1 Comment

Filnor Over a year ago

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations!

Raynal Gobel · Accepted Answer · 2018-07-05 03:08:05Z

0

Did you use vue-webpack template to start your project and use JavaScript Standard Style to lint it? if you are, simply update your package.json to include:

"standard": {
    "parser": "babel-eslint",
    "ignore": [
        "build"
    ]
}

This will ignore any error warning Unexpected token import on your text editor.

answered Jul 5, 2018 at 3:08

Raynal Gobel

1,08016 silver badges25 bronze badges

Comments

Francisco Rodeño Sanchez · Accepted Answer · 2020-11-15 11:10:27Z

0

Add parser and parserOptions in .eslintrc.js file worked for me. This answer helped me

answered Nov 15, 2020 at 11:10

Francisco Rodeño Sanchez

7371 gold badge9 silver badges20 bronze badges

Collectives™ on Stack Overflow

Vue router - cannot lazy load component - Unexpected Token

router.js

package.json

Screenshot of compilation error

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

router.js

package.json

Screenshot of compilation error

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related