Start a discussion
Back
ReplySubscribe
InertiaGo to solution

Issues with SSR

I am neck-deep in issues related to SSR. After following the documentation, here. I get the following errors:

import{router as ar}from"@inertiajs/core";import{createHeadManager as B,router as F}from"@inertiajs/core";import{computed as v,defineComponent as U,h as C,markRaw as E,reactive as N,ref as x,shallowRef as W}from"vue";import{router as _}from"@inertiajs/core";
[truncated]

TypeError: Cannot read properties of null (reading 'dataset')
    at j (file:///.../node_modules/@inertiajs/vue3/dist/index.esm.js:1:5791)
    at file:///.../bootstrap/ssr/ssr.mjs:30:1
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Node version: v18.15.0

Here's my ssr.js:

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import BaseLayout from "@/Shared/Layouts/Base.vue";
import route from "ziggy-js";

createInertiaApp({
    resolve: (name) => {
        const page = resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue"));

        page.then((module) => {
            module.default.layout = module.default.layout || BaseLayout;
        });

        return page;
    },

    title: (title) => title,

    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .mixin({ methods: { route } })
            .use(plugin)
            .mount(el);
    },
});

My head inside app.blade.php contains:

        @routes

        @vite(['resources/css/app.css', 'resources/js/app.js'])

        @inertiaHead

npm run build ✅

php artisan inertia:start-ssr ❌

I am not using a starter kit. Just Fortify. I have no idea what's going on, but I figured someone could hopefully shed some light on the matter.

Haz
Haz
Moderator
0
8
528
alex
alex
Moderator

This is so frustrating because I've seen this before but can't remember how I solved it.

A couple of things to try:

  1. Make sure you're using the latest Inertia client version
  2. Try and move your @vite directive below @inertiaHead
0
Reply
Haz
Haz
Moderator

Yeah, it is really frustrating. I tried those things you suggested, but unfortunately, it didn't make a difference.

"@inertiajs/vue3": "^1.0.7",

        @routes

        @inertiaHead
        
        @vite(['resources/css/app.css', 'resources/js/app.js'])
0
Reply to thread
alex
alex
Moderator

Is your project on GitHub, even if I can take a look privately?

0
Reply to thread
alex
alex
Moderator

I've just noticed that your ssr.js setup doesn't wrap createServer. It should look something like this:

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        title: (title) => `${title} - ${appName}`,
        resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
        setup({ App, props, plugin }) {
            return createSSRApp({ render: () => h(App, props) })
                .use(plugin)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                });
        },
    })
);

See https://github.com/codecourse/build-a-forum-with-inertia/blob/main/resources/js/ssr.js for reference.

0
Reply to thread
Haz
Haz
Moderator

This has me super beat. Though progress has been made. There are still some weird issues with it.

0
Reply
Haz
Haz
Moderator

Fixed. I don't think I can put it down to one thing but for anyone else experiencing the issue. I hope the following helps...

  • Incorrect app.js and ssr.js
  • Incorrect Ziggy routes configuration
  • Order of @routes, @inertiaHead and @vite in app.blade.php

I suggest using the "Build a Forum" as a reference. It was actually very helpful.

In app.js I used createInertiaApp, I also configured Ziggy like so:

import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";

//

.use(ZiggyVue, Ziggy)

In ssr.js I also used createInertiaApp, wrapped in createServer, like so:

createServer((page) =>
    createInertiaApp({

Ziggy routes was configured like so:

    import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";

    .use(ZiggyVue, {
        ...page.props.ziggy,
        location: new URL(page.props.ziggy.location),
    });
0
Reply
whoami (Daryl)
whoami (Daryl)

Thanks for sharing!

0
Reply to thread
Haz
Haz
Moderator
Solution

Fixed. I don't think I can put it down to one thing but for anyone else experiencing the issue. I hope the following helps...

  • Incorrect app.js and ssr.js
  • Incorrect Ziggy routes configuration
  • Order of @routes, @inertiaHead and @vite in app.blade.php

I suggest using the "Build a Forum" as a reference. It was actually very helpful.

In app.js I used createInertiaApp, I also configured Ziggy like so:

import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";

//

.use(ZiggyVue, Ziggy)

In ssr.js I also used createInertiaApp, wrapped in createServer, like so:

createServer((page) =>
    createInertiaApp({

Ziggy routes was configured like so:

    import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";

    .use(ZiggyVue, {
        ...page.props.ziggy,
        location: new URL(page.props.ziggy.location),
    });
0
Reply