Inertia load multiple ssr files

[ObjectAssign]

Okay, so my old SSR is working perfectly fine.

The problem is that it renders 1 big SSR bundle.

vite.config.js (old)

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './resources/js'),
            '@ziggy': path.resolve(__dirname, './resources/js/ziggy')
        },
    },
    plugins: [
        laravel({
            input: 'resources/js/app.ts',
            ssr: 'resources/js/ssr.ts',
            refresh: true,
        }),
        vue({
            reactivityTransform: true,
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    ssr: {
        noExternal: ['@inertiajs/server'],
    },
});

Bundled file:

bootstrap/ssr/ssr.mjs  1,271.61 kB

So I'm trying to make it bundle smaller SSR files which work great:

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
	resolve: {
		alias: {
			'@': path.resolve(__dirname, './resources/js'),
			'@ziggy': path.resolve(__dirname, './resources/js/ziggy'),
		},
	},
	plugins: [
		laravel({
			input: 'resources/js/app.ts',
			ssr: 'resources/js/ssr.ts',
			refresh: true,
		}),
		vue({
			reactivityTransform: true,
			template: {
				transformAssetUrls: {
					base: null,
					includeAbsolute: false,
				},
			},
		}),
	],
	ssr: {
		noExternal: ['@inertiajs/server'],
		external: ['vue', 'laravel-vite-plugin'],
	},
	build: {
		rollupOptions: {
			input: {
				main: path.resolve(__dirname, 'resources/js/app.ts'),
			},
		},
	},
});

Bundled file:

... many other files
bootstrap/ssr/main.mjs                                                     51.00 kB
bootstrap/ssr/assets/Zoom-064fc62a.mjs                                     64.61 kB
bootstrap/ssr/assets/Algorithm-d2e325fe.mjs                                71.85 kB
bootstrap/ssr/assets/Exchange-5e694c95.mjs                                 84.62 kB
bootstrap/ssr/assets/Asset-26210b8e.mjs                                   123.94 kB
bootstrap/ssr/assets/AppLayout-6637f4ba.mjs                               164.51 kB

Thats so neat! I really like that.. however when i run: sail artisan inertia:start-ssr

I then get this error: Inertia SSR bundle not found. Set the correct Inertia SSR bundle path in your inertia.ssr.bundle config.

Im so hyped, this is actually amazing and will improve the overall performance and hopefully eliminate some "Reduce unused JavaScript" in Google Search Console..

However i cant run the SSR command, is there some smart person out there who know how i can make this work?

[RobertBoes]

The SSR bundle isn't served to the client, it runs on your server, so it doesn't really matter if that's built using dynamic imports. That said, Inertia looks for a default bundle, if you change that (you're naming the output main.js) then you'd also have to change that in the config; https://github.com/inertiajs/inertia-laravel/blob/master/config/inertia.php#L28

[ObjectAssign]

After alot of fiddling, etc making sure window is there for bootstrap.ts/axios.. i ended up running into this error:

TypeError: Cannot read properties of null (reading 'dataset')
at exports.createInertiaApp (/var/www/html/node_modules/@inertiajs/inertia-vue3/dist/index.js:1:9300)
at file:///var/www/html/bootstrap/ssr/ssr.mjs:473:1
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
at async loadESM (node:internal/process/esm_loader:91:5)
at async handleMainPromise (node:internal/modules/run_main:65:12)

[abdessamadbettal]

check this repo https://github.com/abdessamadbettal/laravel-starter

Readme has all instructions how to install it and how to use