ReferenceError: document is not defined inertia ssr

laravel 8

inertia js : 0.5.4

package.json

       "@inertiajs/inertia": "^0.10.0",
        "@inertiajs/inertia-vue": "^0.7.2",
   "laravel-mix": "^6.0",
   "sass": "~1.32",
        "sass-loader": "^12.2.0",
        "vue-cli-plugin-vuetify": "~2.3.1",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.10",
        "vuetify-loader": "^1.7.0",
        "webpack": "^5.59.1",
 "vue": "^2.6.14",
     "vue-server-renderer": "^2.6.14",
   "vuetify": "^2.5.5",
        "vuetifyjs-mix-extension": "0.0.20",
        "vuex": "^3.4.0",
        "webpack-node-externals": "^3.0.0"

webpack.ssr.mix.js

const path = require('path')
const mix = require('laravel-mix')
const webpackNodeExternals = require('webpack-node-externals');


mix
    .options({ manifest: false })
    .js('resources/js/ssr.js', 'public/js')
 
    .vue({
        version: 2, options: { optimizeSSR: true }
    })
    .webpackConfig({
        resolve: {
            alias: {

                '@resources': path.resolve('resources'),
                '{Template}': path.resolve('resources/js/Themes/default'),
                '@themeConfig': path.resolve('themeConfig.js'),
                '@core': path.resolve('resources/@core'),
                '@axios': path.resolve('resources/js/plugins/axios.js'),
                '@user-variables': path.resolve('resources/sass/variables.scss'),
                '@sass': path.resolve('resources/sass/'),
                'apexcharts': path.resolve(__dirname, 'node_modules/apexcharts-clevision'),
                '@': path.resolve('resources/js'),
                // @resources/assets/images
            },
        },
   
        target: 'node',
        devtool: 'source-map',
        externals: [webpackNodeExternals({
            // this WILL include `jquery` and `webpack/hot/dev-server` in the bundle, as well as `lodash/*`
            allowlist: [/^vuetify/,  /^lodash/,'vue-tel-input-vuetify/lib',/^vue-tel-input-vuetify^/,/^apexcharts^/,/^vue-apexcharts/,/apexcharts/,/apexcharts-clevision/,/^apexcharts-clevision/,/^apexcharts-clevision^/,/^vue-country-flag/,/\.css$/]
        })],
    })

ssr.js

import Vue from 'vue'
import { createRenderer } from 'vue-server-renderer'
import { createInertiaApp } from '@inertiajs/inertia-vue'
import createServer from '@inertiajs/server'
import PortalVue from 'portal-vue';
import store from './store'
import './plugins/acl'
import VueCompositionAPI from '@vue/composition-api'
import VueMeta from 'vue-meta'
const moment = require('moment');
import vuetify from '@/plugins/vuetify'
import Layout from '@/Layouts/AdminLayout.vue'
import AppLayout from "@/Layouts/AppLayout.vue"
import UserLayout from "@/Layouts/UserLayout.vue"
import ClientOnly from 'vue-client-only'




createServer((page) => createInertiaApp({
    page,
    render: createRenderer().renderToString,
    // resolve: name => require(`./Pages/${name}`),
    resolve:  (name) => {
        // const page = (await import(`./Pages/${name}`)).default
        const page = require(`./Pages/${name}`);
        if (page.layout === undefined && name.startsWith('Admin/')) {
            page.layout = Layout
        }
        if (page.layout === undefined && name.startsWith('Dashboard/')) {
            page.layout = Layout

        }
        if (page.layout === undefined && name.startsWith('UserDashboard/')) {
            page.layout = UserLayout
        }
        if (page.layout === undefined && !name.startsWith('Admin/') && !name.startsWith('Dashboard/')) {
            page.layout = AppLayout

        }


        return page
    },
    setup({ app, props, plugin }) {
        Vue.use(plugin);
        Vue.use(VueCompositionAPI);
        Vue.use(PortalVue);
        Vue.component('client-only', ClientOnly)
     
     
        Vue.use(VueMeta, {
            // optional pluginOptions
            refreshOnceOnNavigation: true
        })
 

        Vue.mixin({ methods: { route } });

    

        return new Vue({
            vuetify: vuetify,
            store,
            render: h => h(app, props)
            ,
        })
    },
}))

npx mix --mix-config=webpack.ssr.mix.js
result : webpack compiled successfully 

node public/js/ssr.js
error : 
var style = document.createElement('style');
              ^

ReferenceError: document is not defined
    at insertStyleElement (C:\laragon\www\test2\public\js\ssr.js:43608:15)
    at addStyle (C:\laragon\www\test2\public\js\ssr.js:43723:13)
    at modulesToDom (C:\laragon\www\test2\public\js\ssr.js:43596:18)
    at module.exports (C:\laragon\www\test2\public\js\ssr.js:43754:25)
    at Object../resources/sass/overrides.scss (C:\laragon\www\test2\public\js\ssr.js:41341:145)
    at __webpack_require__ (C:\laragon\www\test2\public\js\ssr.js:118547:41)
    at Object../resources/js/plugins/vuetify/default-preset/preset/index.js (C:\laragon\www\test2\public\js\ssr.js:38106:1)  
    at __webpack_require__ (C:\laragon\www\test2\public\js\ssr.js:118547:41)
    at Object../resources/js/plugins/vuetify/index.js (C:\laragon\www\test2\public\js\ssr.js:38132:80)
    at __webpack_require__ (C:\laragon\www\test2\public\js\ssr.js:118547:41)

Any help in solving this problem?