Inertia - Error when starting SSR

Context:

• Laravel 10.16
• PHP 8.2
• NPM 10.2.3 && Node v20.10.0
• Running on Docker
• MacOS

Hello there 👋,

I am having a hard time making my application working with InertiaJS SSR. Here is the error I get when running php artisan inertia:start-ssr:

internal/modules/cjs/loader.js:1015
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /var/www/html/node_modules/@inertiajs/vue3/dist/server.js
require() of ES modules is not supported.
require() of /var/www/html/node_modules/@inertiajs/vue3/dist/server.js from /var/www/html/storage/ssr/ssr.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename server.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /var/www/html/node_modules/@inertiajs/vue3/package.json.

Here is my app.js:

import {createApp, h, ref} from 'vue';
import {createInertiaApp, Head, Link} from '@inertiajs/vue3';
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
import {i18n} from "./i18n";
import {createPinia} from 'pinia'
import {_} from "lodash";

export const app = createInertiaApp({
  progress: {
    // The delay after which the progress bar will
    // appear during navigation, in milliseconds.
    delay: 200,

    // The color of the progress bar.
    color: '#606ae3',

    // Whether to include the default NProgress styles.
    includeCSS: true,

    // Whether the NProgress spinner will be shown.
    showSpinner: false,
  },
  resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
  setup({el, App, props, plugin}) {
    createApp({render: () => h(App, props)})
      .use(plugin)
      .use(createPinia())
      .use(i18n)
      .mixin({
        components: {Link, Head, ref},
        computed: {
          lodash: () => _,
        },
        methods: {
          route,
          csrf() {
            return document.querySelector('meta[name="csrf-token"]').content;
          },
          csrfField() {
            return `<input type="hidden" name="_token" :value="${this.csrf()}">`
          },
        },
      })
      .mount(el);
  },
  title: title => `${title.slice(0, 45)} — Shapppes`,
});

And my ssr.js:

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

createServer(page =>
    createInertiaApp({
      page,
      render: renderToString,
      resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
        return pages[`./Pages/${name}.vue`]
      },
      setup({ App, props, plugin }) {
        return createSSRApp({
          render: () => h(App, props),
        }).use(plugin)
      },
    }),
)

Also, here is my Inertia SSR' config:

    'ssr' => [

        'enabled' => true,

        'url' => 'localhost:13714',

        'bundle' => storage_path('/ssr/ssr.js'),

    ],

I followed the InertiaJS' SSR Documentation (https://inertiajs.com/server-side-rendering) by:

• Installing @vue/server-renderer (npm)
• Installing inertiajs/inertia-laravel
• Creating a ssr.js entry-point
• Adding ssr: 'resources/js/ssr.js' to my vite config file

Any help on this issue would be priceless 🙏 Thanks a lot!

ps: My package.json:

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build && vite build --ssr"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^1.6.2",
        "eslint": "^8.39.0",
        "eslint-plugin-vue": "^9.11.0",
        "laravel-echo": "^1.15.2",
        "laravel-vite-plugin": "^0.2.4",
        "lodash": "^4.17.19",
        "postcss": "^8.4.6",
        "pusher-js": "^8.3.0",
        "sass": "^1.53.0",
        "tailwindcss": "^3.3.3",
        "vite": "^2.9.16"
    },
    "dependencies": {
        "@headlessui/vue": "^1.6.6",
        "@heroicons/vue": "^1.0.6",
        "@inertiajs/inertia": "^0.11.1",
        "@inertiajs/vue3": "^1.0.14",
        "@tailwindcss/aspect-ratio": "^0.4.0",
        "@tailwindcss/line-clamp": "^0.4.0",
        "@tailwindcss/typography": "^0.5.3",
        "@tiptap/extension-blockquote": "^2.0.0-beta.220",
        "@tiptap/extension-bold": "^2.0.0-beta.220",
        "@tiptap/extension-bubble-menu": "^2.0.0-beta.220",
        "@tiptap/extension-code-block-lowlight": "^2.0.0-beta.220",
        "@tiptap/extension-document": "^2.0.0-beta.220",
        "@tiptap/extension-dropcursor": "^2.0.0-beta.220",
        "@tiptap/extension-gapcursor": "^2.0.0-beta.220",
        "@tiptap/extension-heading": "^2.0.1",
        "@tiptap/extension-history": "^2.0.0-beta.220",
        "@tiptap/extension-horizontal-rule": "^2.0.0-beta.220",
        "@tiptap/extension-italic": "^2.0.0-beta.220",
        "@tiptap/extension-link": "^2.0.0-beta.220",
        "@tiptap/extension-paragraph": "^2.0.0-beta.220",
        "@tiptap/extension-placeholder": "^2.0.0-beta.220",
        "@tiptap/extension-strike": "^2.0.0-beta.220",
        "@tiptap/extension-text": "^2.0.0-beta.220",
        "@tiptap/extension-typography": "^2.0.0-beta.220",
        "@tiptap/pm": "^2.0.0-beta.220",
        "@tiptap/starter-kit": "^2.0.0-beta.220",
        "@tiptap/vue-3": "^2.0.0-beta.220",
        "@vitejs/plugin-vue": "^2.3.3",
        "@vue-hero-icons/outline": "^1.7.2",
        "@vue-hero-icons/solid": "^1.7.2",
        "@vue/server-renderer": "^3.3.13",
        "highlight.js": "^11.7.0",
        "js-cookie": "^3.0.5",
        "lowlight": "^2.8.1",
        "luxon": "^3.2.1",
        "merge": "^2.1.1",
        "pinia": "^2.1.4",
        "remixicon": "^3.5.0",
        "tailwind-scrollbar-hide": "^1.1.7",
        "vue": "^3.3.4",
        "vue-i18n": "^9.2.2"
    }
}