Getting error "The requested module does not provide an named export" in building SSR with site

I'm trying to build SSR for my laravel project with vite. I followed the documentation and installed required packages.

But when running node bootstrap/ssr/ssr.mjs, I am getting error which is

SyntaxError: The requested module 'laravel_project_dir/node_modules/vue/index.js' does not provide an export named 'createSSRApp'

My config files are as follow.

// package.json
{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build && vite build --ssr"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@inertiajs/server": "^0.1.0",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.2",
        "@vitejs/plugin-vue": "^3.0.0",
        "@vue/server-renderer": "^3.2.31",
        "autoprefixer": "^10.4.7",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.0",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0",
        "vite": "^3.0.0",
        "vue": "^3.2.31"
    },
    "dependencies": {
        "ziggy": "^2.4.0"
    }
}

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

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

// 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 { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";

const appName = "Laravel";

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),
                });
        },
    })
);

But it is working when I import module as object and unpack the required function such as

 import vue from "vue";
const { createSSRApp } = vue;

But I have to unpack all of the imported functions from module in my project. So can you guys help me solve it without unpacking?

My environment is

node: v16.17.0
os: macOs arm64