Lazy-Loaded vue-router components don't work with SSR

S

senty

Guest
I have two different entry points for server.js and client.js.

If I try importing the route without lazy loading, it works:

import Test from "../views/Test";

export const routes = [{
path: '/my-route',
name: "Test",
component: Test,
}]


But if I try lazy-loading, it fails on the SSR:

export const routes = [{
path: '/my-route',
name: "Test"
component: () => import('../views/Test.vue'),
}]

var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []

ReferenceError: window is not defined
So when I doing lazy-loading, somehow it's adding window object. :/

I've found this github issue but I couldn't figure out how to do fix it with laravel-mix. For people knowing Laravel-mix, I can add a a webpackConfig like this:

mix.webpackConfig({
output: {
chunkFilename: 'js/chunks/[name].js?id=[chunkhash]',
publicPath: '/',
}
})


Update:

http://www.compulsivecoders.com/tech/how-to-build-multiple-vendors-using-laravel-mix/ https://github.com/webpack/webpack/issues/7502#issuecomment-443363395

Apparently we can't use laravel-mix to give independent targets for 2 js bundlings, so you either need to build 2 webpack.mix files or bundle them like this. . These 2 links helped me to make 2 bundles and build them separately, however even though it compiled now, SSR with chunks doesn't work.

In my webpack.mix.js:

require('laravel-mix-merge-manifest');

// Creates target specific compiled versions
if (process.env.npm_config_section === 'server') {
mix.js('resources/js/app-server.js', 'public/js')
.webpackConfig({ target: 'node' })
.mergeManifest()
.version();
} else if (process.env.npm_config_section === 'client') {
mix.js('resources/js/app-client.js', 'public/js')
.webpackConfig({ target: 'web' })
.mergeManifest()
.version();
} else {
console.log(
'\x1b[41m%s\x1b[0m',
'Provide correct --section argument to build command: server, client'
);
throw new Error('Provide correct --section argument to build command!')
}

// Creates target specific chunk
mix.webpackConfig({
output: {
chunkFilename: 'js/chunks/' + process.env.npm_config_section + '/[name].js?id=[chunkhash]',
publicPath: '/',
},
}


And in my packages.json:

"scripts": {
"dev-all": "npm --section=server run dev && npm --section=client run dev",
}


By doesn't work, I mean

<div id="app" data-server-rendered="true"><!----></div>


Added the combinations I tried here: https://github.com/JeffreyWay/laravel-mix/issues/2245#issuecomment-538763217

Continue reading...
 
Top