searchForWorkspaceRoot is not a function about quasar-app-extension-ssg

[freddy38510]

You sticked to the version 2.0.0 of vite which does not provide the searchForWorkspaceRoot function.

The vite package is a dependency of @quasar/app-vite, you should remove it with your package manager.

yarn remove vite
// or
npm uninstall vite

I will add a condition to check the installed version of vite.

[freddy38510]

SSR is used to pre-render the pages at build time.

I should highlight this in the documentation, I admit it can be confusing for newcomers.

For references:

https://vuejs.org/guide/scaling-up/ssr.html#ssr-vs-ssg
https://vite-plugin-ssr.com/pre-rendering

[freddy38510]

This function is imported from the vite package to set a custom value for the server.fs.allow option.

Which versions of vite and @quasar/app-vite are you using ?

What command do you execute when this error occurs ?

[robert-hoffmann]

Heres my entry for package.json

  "dependencies": {
    "@quasar/extras": "^1.15.11",
    "@vueuse/core": "^9.13.0",
    "i18next": "^22.4.11",
    "i18next-browser-languagedetector": "^7.0.1",
    "i18next-vue": "^2.1.1",
    "pinia": "^2.0.29",
    "quasar": "^2.11.7",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@quasar/app-vite": "^1.2.1",
    "@types/node": "^12.20.21",
    "@typescript-eslint/eslint-plugin": "^5.10.0",
    "@typescript-eslint/parser": "^5.10.0",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.10.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^9.0.0",
    "postcss": "^8.4.21",
    "prettier": "^2.5.1",
    "typescript": "^4.5.4",
    "vite": "2.0.0"
  },

Dont remember which command, but it was the one added automatically to generate the SSG content

[robert-hoffmann]

Not sure why i have vite 2.0.0 in there ..i think this was a default install, or maybe i added it to plug some dependency error messages, just like often happens with postcss during compilation

I'll remove it, and see it everything keeps working 👍

[robert-hoffmann]

Ok, so removing vite didn't change how the app works

Now to the next error:

 App • ⚠️  ErrorWithCause: Failed to pre-render page for route: "/"
    at PagesGenerator.#renderPage (E:\server\i-technology\powertoys.ai\powertoys.website\node_modules\quasar-app-extension-ssg\src\vite\PagesGenerator.js:306:13)
    at async PagesGenerator.generatePage (E:\server\i-technology\powertoys.ai\powertoys.website\node_modules\quasar-app-extension-ssg\src\vite\PagesGenerator.js:229:16)
    at async PagesGenerator.<anonymous> (E:\server\i-technology\powertoys.ai\powertoys.website\node_modules\quasar-app-extension-ssg\src\vite\PagesGenerator.js:73:38)
caused by: ReferenceError: localStorage is not defined

I have a wrapper around localStorage in pinia, so that it automagically saves values, and cleans up old instances.

Why would there be a messages on : localStorage is not defined

[freddy38510]

This is because localStorage is not available at server side.

You need to conditionnaly run it at client side only using import.meta.env.SSR or process.env.CLIENT | process.env.SERVER.

You can take a look at Quasar documentation about writing universal code for ssr mode.

[robert-hoffmann]

But we are not doing SSR

I would have thought that since we are generating a static website (SSG), all the usual stuff like window, navigator, etc should be accessible.

Thanks for the info, i'll look into it 👍

[robert-hoffmann]

Thanks for those links 🙏

I haven't really played with node or SSR much, and couldn't really find any good tutorials on switching a VueJS app, and even less a Quasar app over to it (like how to wrap window, navigator, etc properly)

Would you happen to have any links on that matter aside the ones you shared ?

[freddy38510]

I couldn't find it myself. This link from the Vue doc covers the main principles without going into detail.

There are some differences between SSR and SSG. In SSR mode, the server receives the request from the client containing the requested URL, cookies, headers, etc. In SSG mode, as it happens during build, only the URL is passed to the server for pre-rendering the corresponding page.

To fully understand the SSG architecture, you need to keep in mind the different scenarios that can occur on the client side:

• There is the first loading of the application that got the pre-rendered html markup (via the generated index.html file of the requested page). In this case, you need to handle the initial state of the application/page, which in your case involves the Pinia stores.

• Then, the client's JavaScript bundle takes over (via hydration) and allows the SPA framework to work. So for subsequent navigations, there are no more SSG involved, your application is now an SPA.

So when you understand the principles well, you have to play between Vue's lifecycle hooks, Quasar's boot files, and conditional statements based on SSR vs. client.

If you need help I can take a look at some part of your code, feel free to ask.