SSR Meta data

Steps:

Laravel new SSR
Valet Secure SSR
cd SSR
code .
composer require laravel/breeze --dev
php artisan breeze:install vue
npm install
npm run dev
modify .env (https & db)
php artisan migrate

modify webpack.mix.js

.disableNotifications()
.version()
.sourceMaps();

modify app.blade.php (remove @env('local'))
npm run dev
Test in browser => works
Modify meta data in Welcome.vue

<Head>
    <title>Home</title>
    <!-- meta description -->
    <meta
      name="description"
      content="This is the homepage for the test page."
    />

    <!-- Google / Search Engine Tags -->
    <meta itemprop="name" content="SSR" />
    <meta
      itemprop="description"
      content="This is a description for the card."
    />
    <meta itemprop="image" content="https://ssr.test/storage/seo-image.jpg" />

    <!-- Facebook Meta Tags -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="SSR" />
    <meta
      property="og:description"
      content="This is a description for the card."
    />
    <meta
      property="og:image"
      content="https://ssr.test/storage/seo-image.jpg"
    />

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="SSR" />
    <meta
      name="twitter:description"
      content="This is a description for the card."
    />
    <meta
      name="twitter:image"
      content="https://ssr.test/storage/seo-image.jpg"
    />
  </Head>

npm install @vue/server-renderer
npm install @inertiajs/server
create ssr.js

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

createServer((page) => createInertiaApp({
  page,
  render: renderToString,
  resolve: name => require(`./Pages/${name}`),
  setup({ app, props, plugin }) {
    return createSSRApp({
      render: () => h(app, props),
    }).use(plugin)
  },
}))

npm install webpack-node-externals
create 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: 3, options: { optimizeSSR: true } })
  .alias({ '@': path.resolve('resources/js') })
  .webpackConfig({
    target: 'node',
    externals: [webpackNodeExternals()],
  })

Modify app.blade.php @inertiaHead
php artisan vendor:publish --provider="Inertia\ServiceProvider" (set ssr -> enabled = true)
npx mix
npx mix --mix-config=webpack.ssr.mix.js
node public/js/ssr.js
valet share
https://www.heymeta.com/ paste https url
It shows only the meta title etc from the app.blade.php errors in console:

Starting SSR server on port 13714...
Inertia SSR server started.
ReferenceError: document is not defined
    at insertStyleElement (webpack-internal:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js:93:15)
    at addStyle (webpack-internal:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js:208:13)
    at modulesToDom (webpack-internal:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js:81:18)
    at module.exports (webpack-internal:///./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js:239:25)
    at eval (webpack-internal:///./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Welcome.vue?vue&type=style&index=0&id=317d1a6e&scoped=true&lang=css:16:120)
    at Object../node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Welcome.vue?vue&type=style&index=0&id=317d1a6e&scoped=true&lang=css (C:\Users\adgow\Documents\Sites\ssr2\public\js\ssr.js:529:1)
    at __webpack_require__ (C:\Users\adgow\Documents\Sites\ssr2\public\js\ssr.js:1420:41)
    at Object../resources/js/Pages/Welcome.vue?vue&type=style&index=0&id=317d1a6e&scoped=true&lang=css (C:\Users\adgow\Documents\Sites\ssr2\public\js\ssr.js:1301:386)
    at __webpack_require__ (C:\Users\adgow\Documents\Sites\ssr2\public\js\ssr.js:1420:41)
    at eval (webpack-internal:///./resources/js/Pages/Welcome.vue:6:126)
ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
    at Module.default (webpack-internal:///./resources/js/Pages/Welcome.vue:3:42)
    at C:\Users\adgow\Documents\Sites\ssr2\node_modules\@inertiajs\inertia-vue3\dist\index.js:1:9383
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

My expectation was that the meta data would show correct? Is this wrong? Also My expectation was to not have any errors in the console.

Any Tips?