How to properly lazy load vuejs components in router

Question

I'm having a problem lazy loading components in my router

this is my router/index.js file

import Vue from "vue";
import Router from "vue-router";
import routes from './routes'

Vue.use(Router);

export default new Router({
    routes,
    mode: 'history',
    base: __dirname,
    scrollBehavior (to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        }
        return { x: 0, y: 0 }
    }
});

And this is my routes.js file for storing routes

import {Trans} from '@/plugins/Translation'

function load(component) {
    return () => import(/* webpackChunkName: "[request]" */ `@/components/${component}.vue`)
}

// I have also tried this way
//Vue.component(
//  'async-webpack-example',
//  // The `import` function returns a Promise.
//  () => import('./my-async-component')
//)

export default [
    {
        path: '/:lang',
        component: {
            template: '<router-view></router-view>'
        },
        beforeEnter: Trans.routeMiddleware,
        children: [
            {
                path: "/",
                name: "Home",
                component: load('Home')
            },
            {
                path: "/contact",
                name: "Contact",
                component: load('Contact')
            },
            ...
            // Many more other routes
            ...
            {
                path: '*',
                redirect: load('404')
            }
        ]
    }
]

The problem is that I'm keep getting error

ERROR in ./src/router/routes.js
Module build failed: SyntaxError: Unexpected token (4:17)

  2 | 
  3 | function load(component) {
> 4 |     return () => import(/* webpackChunkName: "[request]" */ `@/components/${component}.vue`)
    |                  ^
  5 | }
  6 | 
  7 | 

I have also tried to load the this way, but I keep getting the same error

const Test = () => import('@/components/Test');

and then route looks like

{
   path: "/",
   name: "Home",
   component: Test
}

but the problem looks the same.

Can some one please help me figure out, what I'm missing. If you need any additional informations, please let me know and I will provide. Thank you

Answer 1

I am using this syntax for lazy loading. Check this syntax this will resolve your problem.

const Test = resolve => require(['@/components/Test/index'], resolve);

Answer 2

In the end I have found a solution for using upper syntax that was causing me a problem. So if you want to import components this way

return () => import(/* webpackChunkName: "[request]" */ `@/components/${component}.vue`)

then you need to use babel

First you need to install

npm install --save-dev babel-plugin-syntax-dynamic-import

Then create a file .babelrc (in your root folder) and the content of this file should be

{
  "plugins": ["syntax-dynamic-import"]
}

Then start your npm how ever you start it ex. npm run dev

This will enable you to lazy load components with upper syntax