Issue when I try to use lazyload with vuejs

Question

Hi I am trying to use lazyload with VueJs my code is this one:

window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
function lazyLoad(view){
  return() => import(`../views/${view}.vue`)
}  
export default new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
   {
     path: '/account',
     name: 'account',
     component: lazyLoad('Account')
   }
 ]
});

When I do this, it displays this error:

ERROR in ./resources/js/assets/router.js
Module not found: Error: Can't resolve '../views' in '/home/jysparki/public_html/resources/js/assets'
@ ./resources/js/assets/router.js 7:11-51
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

whot could the problem be?

Thanks

Marcello B. · Accepted Answer · 2021-04-09T02:23:11.917

0

Your error code says

Module not found: Error: Can't resolve '../views'

This means that your relative directory in return() => import('../views/${view}.vue') is not correct. Correct your relative directory and it will work.

For example return() => import('@/views/${view}.vue') should work assuming that your folder structure is the default

+ src
|--+ Assets 
|--+ Components
|--+ Views

Because @ is a reference to /src therefore @/Assets is the same as /src/Assets thanks to webpack's resolve feature. https://stackoverflow.com/a/42753045/2073738

edited Apr 09 '21 at 02:23

answered Apr 09 '21 at 02:16

Marcello B.

4,177
11
45
65

I did that but it displays: ERROR in ./resources/js/assets/router.js Module not found: Error: Can't resolve '@/views/${view}.vue' in '/home/jysparki/public_html/resources/js/assets' @ ./resources/js/assets/router.js 7:11-40 – Jesús Rafael Cova Huerta Apr 09 '21 at 02:23
I wonder where is that src? Because I see the folders and I can not find it I just see js/assets, js/components – Jesús Rafael Cova Huerta Apr 09 '21 at 02:25
Without knowing your project structure, I cannot tell you more than that. The issue is that the `views` folder is not found. In this answer I am assuming that you are using vue-cli to generate your project. If you can provide us with more information about your project and how it is structured, and if you are using vue-cli or not that would be useful – Marcello B. Apr 09 '21 at 02:27
I create a folder in js/views and it worked TY! – Jesús Rafael Cova Huerta Apr 09 '21 at 03:14

Issue when I try to use lazyload with vuejs

1 Answers1