Laravel InertiaJS SSR: Cannot find module laravel-vite-plugin/inertia-helpers.js

Question

I have installed the newest version of Laravel as of this writing with Sail. I use Inertia for the front end. I followed the guide and installed the necessary dependencies. Running npm run dev and npm run build works fine. However, when I run npm run ssr I encountered the follwing error:

Cannot find module '/var/www/html/node_modules/laravel-vite-plugin/inertia-helpers.js' imported from /var/www/html/bootstrap/ssr/ssr.mjs

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build && vite build --ssr",
        "ssr": "node bootstrap/ssr/ssr.mjs"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@inertiajs/server": "^0.1.0",
        "@vitejs/plugin-vue": "^3.0.1",
        "@vue/server-renderer": "^3.2.37",
        "autoprefixer": "^10.4.7",
        "axios": "^0.27",
        "laravel-vite-plugin": "^0.5.0",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.6",
        "vite": "^3.0.0",
        "vue": "^3.2.37"
    }
}

resources/js/ssr.js

import { createInertiaApp } from '@inertiajs/inertia-vue3';
import createServer from '@inertiajs/server';
import { renderToString } from '@vue/server-renderer';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createSSRApp, h } from 'vue';

createServer(page =>
  createInertiaApp({
    page,
    render: renderToString,
    resolve: name => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ app, props, plugin }) {
      return createSSRApp({ render: () => h(app, props) }).use(plugin);
    },
  })
);

vite.config.js

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

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

I will really appreciate someone can point me to the right direction. I did try to resolve it on my own but no luck. I can't find any solution either in the documentation.

Answer 1

You should modify "ssr": "node bootstrap/ssr/ssr.mjs" to the correct path to ssr.js bundle like "ssr": "node storage/ssr/ssr.js"