search

geowrgetudor / laravel-inertia-vue-ssr

12 stars 4 forks source link

ReferenceError: document is not defined #1

Open adgower opened 2 years ago

adgower commented 2 years ago

After I run the node ssr.js script initial requests and on return this in the console

ReferenceError: document is not defined
    at insertStyleElement (C:\Users\adgow\Documents\Sites\ssr1\public\js\ssr.js:2993:15)
    at addStyle (C:\Users\adgow\Documents\Sites\ssr1\public\js\ssr.js:3108:13)
    at modulesToDom (C:\Users\adgow\Documents\Sites\ssr1\public\js\ssr.js:2981:18)
    at module.exports (C:\Users\adgow\Documents\Sites\ssr1\public\js\ssr.js:3139:25)
    at Object../node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-8.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-8.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\ssr1\public\js\ssr.js:2886:120)
    at __webpack_require__ (C:\Users\adgow\Documents\Sites\ssr1\public\js\ssr.js:4455:41)    at Object../resources/js/Pages/Welcome.vue?vue&type=style&index=0&id=317d1a6e&scoped=true&lang=css (C:\Users\adgow\Documents\Sites\ssr1\public\js\ssr.js:4328:386)    at __webpack_require__ (C:\Users\adgow\Documents\Sites\ssr1\public\js\ssr.js:4455:41)
    at Object../resources/js/Pages/Welcome.vue (C:\Users\adgow\Documents\Sites\ssr1\public\js\ssr.js:3681:126)
    at __webpack_require__ (C:\Users\adgow\Documents\Sites\ssr1\public\js\ssr.js:4455:41)
ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
    at Module.default (C:\Users\adgow\Documents\Sites\ssr1\public\js\ssr.js:3677:42)
    at C:\Users\adgow\Documents\Sites\ssr1\node_modules\@inertiajs\inertia-vue3\dist\index.js:1:9383
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

My inital setup is latest laravel, laravel breeze with vue. any tips on how to resolve this?

geowrgetudor commented 2 years ago

Can you paste here your normal webpack config and also your ssr webpack config?

adgower commented 2 years ago

Can you paste here your normal webpack config and also your ssr webpack config?

this is based upon new installation of laravel breeze with vue: webpack.mix.js

const mix = require("laravel-mix");

mix.js("resources/js/app.js", "public/js")
    .vue()
    .postCss("resources/css/app.css", "public/css", [
        require("postcss-import"),
        require("tailwindcss"),
        require("autoprefixer"),
    ])
    .webpackConfig(require("./webpack.config"))
    .disableNotifications()
    .version();

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()],
    })
    .version()
    .disableNotifications();
adgower commented 2 years ago

Can you paste here your normal webpack config and also your ssr webpack config?

When I try and compile with ziggy imports I get: Module not found: Error: Can't resolve './ziggy' in 'C:\Users\adgow\Documents\Sites\ssr5\resources\js'

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

import { ZiggyVue } from "ziggy";
import { Ziggy } from "./ziggy";

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: (name) => require(`./Pages/${name}`),
        setup({ app, props, plugin }) {
            return createSSRApp({
                render: () => h(app, props),
            })
                .use(plugin)
                .use(ZiggyVue, Ziggy)
                .component("Link", Link)
                .component("Head", Head);
        },
    })
);
adgower commented 2 years ago

I got it working by running: php artisan ziggy:generate

then I got another error:

Starting SSR server on port 13714...
Inertia SSR server started.
ReferenceError: Link is not defined
    at setup (C:\Users\adgow\Documents\Sites\ssr5\public\js\ssr.js:2828:132)
    at C:\Users\adgow\Documents\Sites\ssr5\node_modules\@inertiajs\inertia-vue3\dist\index.js:1:9464
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Server.<anonymous> (C:\Users\adgow\Documents\Sites\ssr5\node_modules\@inertiajs\server\lib\index.js:46:37)
ReferenceError: Link is not defined
    at setup (C:\Users\adgow\Documents\Sites\ssr5\public\js\ssr.js:2828:132)
    at C:\Users\adgow\Documents\Sites\ssr5\node_modules\@inertiajs\inertia-vue3\dist\index.js:1:9464
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Server.<anonymous> (C:\Users\adgow\Documents\Sites\ssr5\node_modules\@inertiajs\server\lib\index.js:46:37)
geowrgetudor commented 2 years ago

You are not importing Link and Head

import { createInertiaApp, Link, Head } from "@inertiajs/inertia-vue3";
qq958691165 commented 1 year ago

How to fix this error?

ReferenceError: document is not defined
    at insertStyleElement (/home/jack/code/inertia-ssr/public/js/ssr.js:2651:15)
    at addStyle (/home/jack/code/inertia-ssr/public/js/ssr.js:2766:13)
    at modulesToDom (/home/jack/code/inertia-ssr/public/js/ssr.js:2639:18)
    at module.exports (/home/jack/code/inertia-ssr/public/js/ssr.js:2797:25)
    at Module../node_modules/style-loader/dist/cjs.js!./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??clonedRuleSet-18.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-18.use[2]!./node_modules/less-loader/dist/cjs.js!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Layout/Header.vue?vue&type=style&index=0&id=b31d6d4e&scoped=true&lang=less (/home/jack/code/inertia-ssr/public/js/ssr.js:2514:120)
    at __webpack_require__ (/home/jack/code/inertia-ssr/public/js/ssr.js:3379:42)
qq958691165 commented 1 year ago

I found add 

mix.vue({
    ...
    useVueStyleLoader: true,
})

in webpack.ssr.config.js can fix this error !