ReferenceError: document is not defined inertia ssr

Versions:

• @inertiajs/inertia version: 0.11.0
• @inertiajs/inertia-vue version: 0.8.0

Describe the problem:

laravel 8

inertia js : 0.5.4

package.json

       "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue": "^0.8.0",
   "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)

public/js/ssr.js

Any help in solving this problem?

[JBSommeling]

Having a similar problem here. I think it’s a webpack configuration problem maybe?

Using Laravel 9 with: “@inertiajs/inertia”: “^0.11.0”, “@inertiajs/inertia-vue3”: “^0.6.0”,

I believe we experience this error when the application building process is done on the server-side where no ‘document’ exists. Anyone having an idea how to solve this? The internet says something about using an npm package called JsDom. Not sure if that will do the trick though…

[ajnsn]

Hey @samehdoush This seems to be an issue with Vuetify, there are many references in the error stack. document is not available when using SSR. I assume this is nothing related to Inertia. What you can try is to temporarly remove Vuetify from your build process and try to narrow down the problem this way.