Not working Inertia SSR mode

[rlidev]

I am using Laravel + Vue 3 with Inertia js in SSR mode, when I try to visit the page I get this error.

Starting SSR server on port 13714... Inertia SSR server started. [Vue warn]: Unhandled error during execution of async component loader at <AsyncComponentWrapper> [Vue warn]: Unhandled error during execution of setup function at <AsyncComponentWrapper> ReferenceError: document is not defined

https://i.imgur.com/pAiRs8a.png

Does anyone know how I could fix this? Thank you

[timramseyjr]

@rlidev Did you come up with a solution yet?

I am facing the same thing, and I think the issue is that document is a client variable and not available on the server, so Quill shouldn't be loaded on the server. I haven't figured it out for vue yet, but this explains the issue and the solution on how to do it in react - https://learnjsx.com/category/4/posts/nextjs-document-is-not-defined-react-quill.

[rlidev]

I don't know if it's the best solution but I fixed the problem like this, although the screen flickering is noticeable when loading the text editor asynchronously...

<script setup>
import Layout from "@/Layouts/Layout.vue";
import { Head } from "@inertiajs/inertia-vue3";
import {
    ref,
    defineAsyncComponent,
    onMounted,
} from "vue";

const QuillEditorComponent = defineAsyncComponent(() =>
    import("./Partials/QuillEditor.vue")
);

const isMounted = ref(false); // CARGAR COMPONENTE DESPUES MONTARSE EL COMPONENTE FIX SSR

onMounted(() => {
    isMounted.value = true;
    //console.log(`the component is now mounted.`);
});

</script>
<template>
<QuillEditorComponent v-if="isMounted" ></QuillEditorComponent>
</template>