Blank page after updated app build

[jbuese]

We have been experiencing this problem for some time now and cannot seem to find a solution. After we deploy changes, users get a completely blank page. The only fix is to reload the page. The problem seems to occur on desktop browsers (chrome, firefox, edge) and also on mobile PWA.

TypeError: s._s is undefined            index.js:26:21976

For the image, I tried to comment out the dark-mode.js code (specifically the Dark.set(darkMode); which seemed to be the culprit for the .set not being available), but got the above error instead.
I have not seen the local development bug yet - I assume it has something to do with the build.

This is what our docker file is executing (through npm in package.json of course):
quasar build -m pwa

This is our config:

export default defineConfig((ctx) => {
  return {
    boot: [
      "i18n",
      "axios",
      "auth",
      "emitter",
      "socket",
      "hotjar",
      "quasar-lang-pack",
      "dark-mode",
      "set-defaults",
    ],

    css: ["app.scss"],

    extras: [
      "mdi-v7",
      "material-icons",
      "material-symbols-outlined",
      "fontawesome-v6",
      "bootstrap-icons",
    ],
    build: {
          target: {
            browser: ["es2022", "firefox115", "chrome115", "safari14"],
            node: "node20",
          },
          vueRouterMode: "history", // available values: 'hash', 'history'
          useFilenameHashes: false,
          alias: {
            "@": path.resolve(__dirname, "./src"),
          },
          env: {
            ...env,
          },
          viteVuePluginOptions: {
            template: {
              compilerOptions: {
                isCustomElement: (tag) => tag.startsWith("pdfjs-"),
              },
            },
          },
          vitePlugins: [
            [
              "@intlify/unplugin-vue-i18n/vite",
              {
                runtimeOnly: ctx.dev,
                ssr: ctx.modeName === "ssr",
                include: [fileURLToPath(new URL("./src/i18n", import.meta.url))],
              },
            ],
            [
              "vite-plugin-checker",
              {
                eslint: {
                  lintCommand: 'eslint "./**/*.{js,mjs,cjs,vue}"',
                },
              },
              { server: false },
            ],
          ],
        },
...

[stefanvanherwijnen]

I think the boot files run before the Dark plugin is loaded. Try to run the code in an onMounted hook instead and see if that works.

[jbuese]

Thanks for the tip Stefan! I already tried commenting out the dark plugin part but got the same problem (only this time in a different place). But we may have other parts that are similar and cause the same problem - i will get back to you on this.

Quasar docs second your answer btw: "A common use case for Quasar applications is to run code before the root Vue app instance is instantiated, like injecting and initializing your own dependencies (examples: Vue components, libraries…) or simply configuring some startup code of your app." https://quasar.dev/quasar-cli-vite/boot-files/

[jarofbilly]

@jbuese we experienced this problem on our PWA for a long time and found it was caused by this filename hashes setting. If you've set it to false, try changing it back to true (the opposite of what the docs recommend). Quasar Docs - Filename hashes quirk

[jbuese]

Thanks for your comment! We have tried a lot of things but are still having problems - will definitely try this!