Vue router is not working when new route added - laravel

Question

My app is working fine in localhost with this configuration, I use XAMMP in localhost. but when I deployed my app in a VPS with Linux (ubunto) OS, I got this problem. In the first days they worked fine too, but recently when I added the last route (categories) and did 'npm run production' my routes suddenly stopped working.
When I click on a router-link the URL doesn't even change.
I changed my webserver from nginx to apache, but it doesn't make any difference.
my routes are like this:
const Index = resolve => {
require.ensure(['./frontend-components/main-content/index'], () => {
resolve(require('./frontend-components/main-content/index'));
});
};
const news = resolve => {
require.ensure(['./frontend-components/single/news'], () => {
resolve(require('./frontend-components/single/news'));
});
};
const lists = resolve => {
require.ensure(['./frontend-components/single/lists'], () => {
resolve(require('./frontend-components/single/lists'));
});
};
const categories = resolve => {
require.ensure(['./frontend-components/single/categories'], () => {
resolve(require('./frontend-components/single/categories'));
});
};
export const routes = [
{path: '/', component: Index},
{path: '/articles/:article_id/:slug',component: news,name: 'articles'},
{path: '/lists/:article_id/:slug',component: lists,name: 'lists'},
{path: '/categories/:cat_id/:slug', component: categories},
]
and my webpack configuration is :
const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/fr-app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/fr-app.scss', 'public/css')
.sass('resources/assets/sass/admin.scss', 'public/css')
.options({processCssUrls: false})
.webpackConfig({ output: { filename: '[name].js', chunkFilename:
'js/[name].app.js', publicPath: '/' } });
I have this error when I click on a router-link:
Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
and it refers to this line to source code:
// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

Answer 1

require.ensure is the legacy Webpack syntax, which is superceded by import. And as #Phil pointed out, resolve => {/*...*/} itself does not create a Promise, which is needed for lazy loading routes. You probably meant something like this:
const foo = new Promise(resolve => {
require.ensure( './path/to/foo', () => resolve(require('./path/to/foo')) );
});
const routes = [
{
path: '/foo',
component: foo
}
];
However, the vue-router docs recommends the import syntax for lazy loading routes:
const routes = [
{
path: '/foo',
component: () => import('./path/to/foo')
}
];
demo