Inertia SSR does not work

I have setup new Laravel project with Breeze package + Inertia SSR support

php artisan breeze:install vue --ssr

I do everything according Inertia SSR guide. At the end I run commands:

npx mix

npx mix --mix-config=webpack.ssr.mix.js

node public/js/ssr.js

I open localhost and I see this error

Unable to locate Mix file: /css/app.css.

I open app.blade.php and remove mix function from assets. Now page is working. I navigate to localhost/login and press CTRL+U (to view page source). And there is no prerendered html, just usual SPA code. SSR app logs no activity except when starting

Starting SSR server on port 13714... Inertia SSR server started.

How do I fix it? P.S. My project is running on WSL virtual machine. Could it be the problem?

app.blade.php

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title inertia>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link rel="stylesheet" href="/css/app.css">

    <!-- Scripts -->
    @routes
    <script src="/js/app.js" defer></script>
    @inertiaHead
</head>

<body class="font-sans antialiased">
    @inertia

    @env ('local')
    <script src="/js/bundle.js"></script>
    @endenv
</body>

</html>

ssr.js

import { createSSRApp, h } from 'vue';
import { renderToString } from '@vue/server-renderer';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import createServer from '@inertiajs/server';
import route from 'ziggy';

const appName = 'Laravel';

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        title: (title) => `${title} - ${appName}`,
        resolve: (name) => require(`./Pages/${name}.vue`),
        setup({ app, props, plugin }) {
            return createSSRApp({ render: () => h(app, props) })
                .use(plugin)
                .mixin({
                    methods: {
                        route: (name, params, absolute) => {
                            return route(name, params, absolute, {
                                ...page.props.ziggy,
                                location: new URL(page.props.ziggy.url),
                            });
                        },
                    },
                });
        },
    })
);

webpack.ssr.mix.js

const mix = require('laravel-mix');
const webpackNodeExternals = require('webpack-node-externals');

mix.js('resources/js/ssr.js', 'public/js')
    .vue({
        version: 3,
        useVueStyleLoader: true,
        options: { optimizeSSR: true },
    })
    .alias({
        '@': 'resources/js',
        ziggy: 'vendor/tightenco/ziggy/dist/index',
    })
    .webpackConfig({
        target: 'node',
        externals: [webpackNodeExternals()],
    });

Sinnbeck

3 years ago

Level 102

According to the docs, this should in the head? Or arent you using mix?

<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
    <script src="{{ mix('/js/app.js') }}" defer></script>
@inertiaHead

https://inertiajs.com/server-side-rendering#enabling-ssr

Did you complete the other steps as well?

Upgreidas

3 years ago

Level 1

@Sinnbeck As I mentioned in the post initially I get this error Unable to locate Mix file: /css/app.css. So I removed mix function from layout and left just absolute path to files. Do you think this is the problem?

And yeah I did all the other steps.

Sinnbeck

3 years ago

Level 102

@Upgreidas You can try rebuilding with mix (regular mix command) and see if the file exists in the public folder?

davidifranco

3 years ago

Level 10

i know this is 3 weeks old... but the problem is in your webpack.ssr.mix.js file... you need to tell mix not to create a manifest file for the ssr build. add

.options({ manifest: false })

Please or to participate in this conversation.