Quasar dev (mode SSR) Unhandled error at setup function

Question

I have recreated a project from Vue + Vite with Quasar SPA to Quasar CLI Vite SSR. I did that because I need SSR for SEO.

I succeded to import every files and fix all the errors, running SPA dev mode quasar dev works well. But when I try to add ssr in dev quasar dev --mode ssr I get the following error. Obviously I get the same error in prod quasar build -m ssr --debug (no error) then npm run start (same error but only line 1 of the following)

[Vue warn]: Unhandled error during execution of setup function 
  at <NavBar>
C:\Users\...MY PROJECT...\node_modules\ouch\handler\PrettyPageHandler.js:328
            SCRIPT_FILE: require.main.filename,
                                      ^

TypeError: Cannot read properties of undefined (reading 'filename')
    at PrettyPageHandler.__getServerAndRequestInfo (C:\Users\...\node_modules\ouch\handler\PrettyPageHandler.js:328:39)
at PrettyPageHandler.handle (C:\Users\...\node_modules\ouch\handler\PrettyPageHandler.js:143:41)
    at next (C:\Users\...\node_modules\ouch\Ouch.js:137:25)
    at C:\Users\...\node_modules\ouch\Ouch.js:141:9
    at Ouch.handleException (C:\Users\...\node_modules\ouch\Ouch.js:142:7)
    at Object.renderError [as error] (C:\Users\...\node_modules\@quasar\app-vite\lib\modes\ssr\ssr-devserver.js:44:16)
    at C:\Users\...\.quasar\ssr\compiled-dev-webserver.js:52:19

I don't know what is PrettyPageHandler (no info in Quasar doc). I don't know what means the SCRIPT_FILE: require.main.filename required (there is no main.js with Quasar CLI Boot Files). I don't think I need to put something in Plugins.

This is my NavBar component script setup imports (the setup function the [Vue Warn] is talking about, isn't it?):

<script setup>
import { ref, watch, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import roomsData from "../data/roomsData.json";
import CustomDivider from "./CustomDivider.vue";
import LanguageSwitch from "./LanguageSwitch.vue";
import { debounce } from "quasar";

let route = useRoute();
let router = useRouter();
let routes = router.options.routes;

// next is basic stuff, Quasar, window, document
...

The dependencies from package.json:

"dependencies": {
    "@quasar/extras": "^1.0.0",
    "firebase": "^9.19.1",
    "pinia": "^2.0.11",
    "quasar": "^2.6.0",
    "vue": "^3.0.0",
    "vue-i18n": "^9.0.0",
    "vue-router": "^4.0.0",
    "@fullcalendar/core": "^6.0.2",
    "@fullcalendar/daygrid": "^6.0.2",
    "@fullcalendar/interaction": "^6.0.2",
    "@fullcalendar/vue3": "^6.0.2",
    "dotenv": "^16.0.3"
  },
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "^3.3.1",
    "@quasar/app-vite": "^1.0.0",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.10.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^9.0.0",
    "postcss": "^8.4.14",
    "prettier": "^2.5.1"
  },

I am not using Firebase nor FullCalendar in the NavBar.

The NavBar component is the first component called from the App.vue.

<template>
  <q-layout view="hHh lpr fff">
    <NavBar />

The <!-- quasar:entry-point --> is set in the index.html.

I have no clue what to do and where to search. Any suggestions?

Answer 1

Well, it was just the use of window (window.onscroll() for example)

Fixed it by doing it only Client side, not server side

if (process.env.CLIENT) {
   window; // do whatever with window
}