Why can't I use require in vue-router routes.js?

Question

When using vue-router the standard set up is

main.js requires the routes.js file, which will look something like this

//routes.js
import Register from './components/Register'
import Login from './components/Login'

module.exports = [{
            path: `/`,
            component: Login,
        }, {
            path: `/register`,
            component: Register,
        }]

My question is why can I just do

//routes.js
module.exports = [{
            path: `/`,
            component: require('./components/Login'),
        }, {
            path: `/register`,
            component: require('./components/Register'),
        }]

When I try it, I get this console error

Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <App> at src/App.vue
         <Root>

I can't answer the question of why this doesn't work, but you look like you might be trying to lazy load your routes - if that's what you're trying to accomplish, check out https://router.vuejs.org/guide/advanced/lazy-loading.html — Tanner, Oct 30 '19 at 15:48
No, it is already short. And keep in mind that `require` is completely different from `import/export`. — Sang Dang, Oct 30 '19 at 15:52
I guess thats the root of my question. How do require, and import differ. — Seth McClaine, Oct 30 '19 at 15:57
https://stackoverflow.com/questions/31354559/using-node-js-require-vs-es6-import-export — Tanner, Oct 30 '19 at 16:01

sanjib mondal · Answer 1 · 2020-04-30T20:31:07.220

**import and require work differently see the link bellow there are good documentation about the topic. ** es6 features and require how Actually Works **see the document how node js work under the hood how module.export work what is the nodejs design pattern (how node js wrap our code within Immediately invoked function expression and pass code into v8 engine)

you can simply midify your routes.js file

component:() => import('./components/Register.vue') or component: require('./components/Login.vue').default

both will work

[{ path: '/', component:() => import('./components/Register.vue') }, { path: '/register', component: require('./components/Login.vue').default }];

Why can't I use require in vue-router routes.js?

1 Answers1