I downloaded a template online to better understand VueJs and also create a web app. However there is a problem with routing. There is a function in my router’s index.js that imports a path. The import syntax seems to be buggy due to some webpack issues. I tried a lot of different things but couldn’t fix the bug so to find a workaround for that import syntax

This is my code for router’s index.js

import vue.js from ‘vue’
import VueAnalytics from ‘vue-analytics’
import Router from ‘vue-router’
import Meta from ‘vue-meta’

// Routes
import paths from ‘./paths’
// import views from ‘./views’

function route (path, view, name) {
return {
name: name || view,
path,
component: () => import(
`../views/${view}.vue`
)
}
}

Vue.use(Router)

// Create a new router
const router = new Router({
mode: ‘history’,
routes: paths.map(path => route(path.path, path.view, path.name)).concat([
{ path: ‘*‘, redirect: ‘/home’ }
]),
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
if (to.hash) {
return { selector: to.hash }
}
return { x: 0, y: 0 }
}
})

Vue.use(Meta)

// Bootstrap Analytics
// Set in .env
// https://github.com/MatteoGabriele/vue-analytics
if (process.env.GOOGLE_ANALYTICS) {
Vue.use(VueAnalytics, {
id: process.env.GOOGLE_ANALYTICS,
router,
autoTracking: {
page: process.env.NODE_ENV !== ‘development’
}
})
}

export default router

When i try to build it, I get an error saying:

ERROR in ./src/router/index.js
Module build failed: SyntaxError: C:/djangoProjects/martin - Copy/martin/src/router/index.js: Unexpected token (15:21)

The syntax error is on line (15:21), in the route function on the component: () => import( line and exactly on import. Fixing this issue is a pain so I was wondering if there is a workaround for it without using the import syntax?

Solution :

If I remember correctly you’ll need a plugin for babel that can handle dynamic imports.

Check out:
https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import

Run npm install @babel/plugin-syntax-dynamic-import
Create or open .babelrc

{
“plugins”: [“@babel/plugin-syntax-dynamic-import”]
}