Vue router lazy components not working about laravel-server-side-rendering HOT 4 CLOSED

If anyone wonders - this is how I achieved it:

I learn about separating bundles from charlesBochet's comment, however instead of 2x webpack.mix.js files I used one.

• package.json

"scripts": {
    "dev-all": "concurrently \"npm --section=server run dev\" \"npm --section=client run dev\"  --kill-others-on-fail",
    "dev-client": "npm --section=client run dev",
    "dev-server": "npm --section=server run dev"
     ...
}

• webpack.mix.js

if (process.env.npm_config_section === 'server') {
    mix.js('resources/js/app-server.js', 'public/js')
        .webpackConfig({
            target: 'node',
  
            // Prevent code-split for server-build
            plugins: [
                new webpack.optimize.LimitChunkCountPlugin({
                    maxChunks: 1,
                })
            ],
        })
        .mergeManifest()
        .version();

} else if (process.env.npm_config_section === 'client') {
    mix.js('resources/js/app-client.js', 'public/js')
        .webpackConfig({
            target: 'web',
            output: {
                chunkFilename: 'js/chunks/[name].js?id=[chunkhash]',
                publicPath: '/',
            },
        })
        .mergeManifest()
        .version();

    // Only build css with the client build, server build only needs
    // the html and not the css
    mix.sass('resources/sass/app.scss', 'public/css')
} 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!')
}

• app-server.js - should wait for the router to be ready

new Promise((resolve, reject) => {
    router.push(context.url);
    router.onReady(() => {
        resolve(app);
    }, reject);
})
    .then(app => {
        renderVueComponentToString(app, (err, res) => {
            if (err) throw new Error(err);
            dispatch(res);
        });
    });

• and finally router file code-splitting works for app-client.js

export const routes = [
{
    path: '/',
    name: "Home",
    component: () => import('../views/Home.vue')
},

from laravel-server-side-rendering.

I think I have an idea why this is happening:

export const routes = [{
     path: '/', 
     name: "Home", 
     component: () => import('../views/Home')
}]

with this code, and this app-server.js setup

import renderVueComponentToString from 'vue-server-renderer/basic';
import app from './app';
import {router} from './router/index';

new Promise((resolve, reject) => {
    router.push(context.url);
    router.onReady(() => {
        // const matchedComponents = router.getMatchedComponents();
        // if (!matchedComponents.length) {
        //     return reject({ code: 404 });
        // }
        resolve(app);
    }, reject);
})
    .then(app => {
        renderVueComponentToString(app, (err, res) => {
            if (err) throw new Error(err);

            dispatch(res);
        });
    });

I get an error:

Error: Cannot find module './js/chunks/server/0.js?id=c3384f174123f0848451'
The command "/usr/bin/node /home/vagrant/Code/project/storage/app/ssr/ba362ac6c1b2711a2e802afa2fa15c78.js" failed.
Exit Code: 1(General error)

Working directory: /home/vagrant/Code/project/public
Error Output:
internal/modules/cjs/loader.js:628
throw err;
^

Error: Cannot find module './js/chunks/server/0.js?id=c3384f174123f0848451'
Require stack:

• /home/vagrant/Code/project/storage/app/ssr/ba362ac6c1b2711a2e802afa2fa15c78.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15)

Look at the paths:
In my compiled file (which is at public/js) I have this line:

var chunk = require("./js/chunks/server/" + ({}[chunkId]||chunkId) + ".js?id=" + {"0":"c3384f174123f0848451"}[chunkId] + "");

That seems like a relative path. However the file is actually running in what I specify in the config/ssr.php - 'temp_path' => storage_path('app/ssr') - so it cannot find the path.

However, even I change the temp_path to public_path() so that it can find the chunk from ./js/chunks/server/ (which is public/js/chunks/server/0.js), it still throws the same error. Even though the SSR's temp_path is different.

The command "/usr/bin/node /home/vagrant/Code/project/public/3560d8d101faa4bdef316054b14873cc.js" failed. Exit Code: 1(General error) Working directory: /home/vagrant/Code/project/public Output: ================ Error Output: ================ internal/modules/cjs/loader.js:628 throw err; ^ Error: Cannot find module './js/chunks/server/0.js?id=c3384f174123f0848451'

@sebastiandedeyne Can you please take a look?

from laravel-server-side-rendering.

why I got this error?

vendor.js:26457 [Vue warn]: Failed to mount component: template or render function not defined.

found in

--->
at resources/js/src/App.vue

from laravel-server-side-rendering.

Just wrestled with this all day. In addition to the solutions above, separate webpack or mix configs for client and server, and waiting on vue-router to be ready. I had to change the output path in webpack to match the storage/app/ssr directory being used for the temp file. The problem was the temp file was stored in storage/app/ssr and my async components were in public/dist.

Used the storage path helper in my blade template
{!! ssr(storage_path('app/ssr/js/app-server.js'))->render() !!}

Changed Webpack config to
path: path.resolve(__dirname, 'storage/app/ssr'),

It's all working now. Hope this helps anyone else who was stuck on this like me.

from laravel-server-side-rendering.