How can I make a Quasar project (with vite) run on the minimum Chrome 61 browser without encountering a white screen?

[luxi78]

How can I configure my project to run properly on Chrome 61 instead of just displaying a blank screen? I've been searching on Google for a while and found some solutions to similar issues, but they didn't work.

Here is the information for my project:

• Dev mode: spa
• Pkg quasar: v2.12.3
• Pkg @quasar/app-vite: v1.4.3
• Browser target: es2019|edge88|firefox78|chrome61|safari13.1

I made the following modifications to the quasar.config.js file:

• Changed "chrome83" to "chrome61" in the build -> target -> browser section.
• Set build -> polyfillModulePreload to true.
• Added the following entry to build -> vitePlugins: ['@vitejs/plugin-legacy', { targets: ['chrome 61'] }]

I also added "@vitejs/plugin-legacy": "1.8.2" to the devDependencies section of package.json.

After making these modifications, the white screen issue still persists on Chrome 61. Please guide me on how to resolve this problem. Thank you for all your help!

[luxi78]

At that time, the console says :

[jclaveau]

If you only need ES syntax retro-compatibility you can use this plugin https://github.com/marcofugaro/browserslist-to-esbuild
to use base Esbuild config on browserlist one (and thus be more easy/consistent than what's recommended in Quasar's docs https://quasar.dev/quasar-cli-vite/browser-compatibility)

BUT, this won't provide any support for new apis (In my case I want to use Object.hasOwn()) as explained here: https://esbuild.github.io/api/#target

Note that this is only concerned with syntax features, not APIs. It does not automatically add polyfills for new APIs that are not used by these environments. You will have to explicitly import polyfills for the APIs you need (e.g. by importing core-js). Automatic polyfill injection is outside of esbuild's scope.

If you need polyfills, like me, you need @vitejs/plugin-legacy, but the way it behaves by default is quite odd:

• It will produce 2 chunks : one for legacy and one for modern ones
• BUT it won't add the auto detected polyfills to the modern chunk - as core-js auto detection is too aggressive making the polyfill chunk almost as big as the one for legacy browsers - so they recommend to list the use https://polyfill.io which will produce polyfills chunk by user agent

Personally I don't need a super lightweight app (at least for now) so I simply used the fat (37kb gzipped), non-recommended, polyfills for modern browsers with the following config:

      vitePlugins: [
        // ...
        ...legacy({
          // Debug with DEBUG=vite:legacy yarn build
          modernPolyfills: true, // Not recommended but easy compatibility for browsers of the browserslist target
        }),
        // ...
    ]

Also Polyfill.io doesn't support hasOwn() for now

[luxi78]

Thank you, It helps