IlyaSemenov/nuxt-vite-legacy

Not working on static website

Closed this issue · 11 comments

Hi there,

I've been trying to use your plugin for project created by vitesse-nuxt3. I generated the static web site and hosted it with http-server. It doesn't work on chrome 60 while it's ok above chrome66. Any insights into what might be causing this problem? Below is my nuxt.config:

modules: [
    '@vueuse/nuxt',
    '@unocss/nuxt',
    '@pinia/nuxt',
    '@nuxtjs/color-mode',
    'nuxt-module-eslint-config',
    'nuxt-vite-legacy'
  ],
  legacy: {
    targets: ["chrome 49"],
    additionalLegacyPolyfills: [
      "mdn-polyfills/Element.prototype.getAttributeNames",
    ],
    modernPolyfills: [
      'es.global-this',
      'es/object',
      'es/array',
      'es.symbol',
      'es.array.filter',
      'es.promise',
      'es.promise.finally',
      'es/map',
      'es/set',
      'es.array.from',
      'es.array.for-each',
      'es.object.define-properties',
      'es.object.define-property',
      'es.object.get-own-property-descriptor',
      'es.object.get-own-property-descriptors',
      'es.object.keys',
      'es.object.to-string',
      'web.dom-collections.for-each',
      'esnext.global-this',
      'esnext.string.match-all',
      'es.object.define-setter',
      'es.array.iterator',
      'es.object.assign',
      'es.array.includes'
    ],
  },

Thanks!

image

I got the same issue.
I change the "nuxt" npm version to 3.7.4 and fix it.
you can try it.

But I also want this issue can be fixed.

I got the same issue. I change the "nuxt" npm version to 3.7.4 and fix it. you can try it.

But I also want this issue can be fixed.

Great! It works. Do you know how to fix the style compability?
image

It should like below:
image

Honestly, I never tested this with static websites. This module relies on a runtime nitro plugin:

// Make vite-legacy build operational.
// See https://github.com/nuxt/nuxt/issues/15464
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook("render:response", (response) => {

but I don't know if it's even called during prerendering...

I'll try to see when I have time; also, PR's welcome.

Perhaps #13 is the same problem.

Perhaps #13 is the same problem.

Actually it works very well above chrome 66,thanks a lot for your plugin. I don't know if it also points to old version below 66.

Honestly, I never tested this with static websites. This module relies on a runtime nitro plugin:

// Make vite-legacy build operational.
// See https://github.com/nuxt/nuxt/issues/15464
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook("render:response", (response) => {

but I don't know if it's even called during prerendering...

I'll try to see when I have time; also, PR's welcome.

In fact, I also encountered this problem when accessing with Chrome 55 in SSR mode. The main reason is that during page pre-rendering, it requests JSON from the meta folder, but the fetch request method is undefined, leading to the failure of the request. However, when I changed Nuxt to version 3.7.4, accessing in SSR mode worked normally.

I got the same issue. I change the "nuxt" npm version to 3.7.4 and fix it. you can try it.
But I also want this issue can be fixed.

Great! It works. Do you know how to fix the style compability? image

It should like below: image

Additionally, regarding the conversion issue with older CSS versions, it's true that style errors can occur due to old browsers not supporting new CSS methods. For now, I don't know of any solution, so the only option is to minimize the use of advanced syntax in the source code to maximize CSS compatibility.

Honestly, I never tested this with static websites. This module relies on a runtime nitro plugin:

// Make vite-legacy build operational.
// See https://github.com/nuxt/nuxt/issues/15464
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook("render:response", (response) => {

but I don't know if it's even called during prerendering...
I'll try to see when I have time; also, PR's welcome.

In fact, I also encountered this problem when accessing with Chrome 55 in SSR mode. The main reason is that during page pre-rendering, it requests JSON from the meta folder, but the fetch request method is undefined, leading to the failure of the request. However, when I changed Nuxt to version 3.7.4, accessing in SSR mode worked normally.

I got the same issue. I change the "nuxt" npm version to 3.7.4 and fix it. you can try it.
But I also want this issue can be fixed.

Great! It works. Do you know how to fix the style compability? image
It should like below: image

Additionally, regarding the conversion issue with older CSS versions, it's true that style errors can occur due to old browsers not supporting new CSS methods. For now, I don't know of any solution, so the only option is to minimize the use of advanced syntax in the source code to maximize CSS compatibility.

OK. Appreciate for your answer.

You can disable app manifest generation in nuxt:

https://nuxt.com/blog/v3-8#app-manifest

In that case the meta json files are not generated.

Guys, I just tried unmodified playground of this repo:

pnpm nuxi generate playground
pnpx serve playground/.output/public

and it worked:

image

Even though it printed a few error messages about the manifest, the scripts loaded and the Vue app was functioning.

Can anyone please come up with a reproduction of a failing app?

You can disable app manifest generation in nuxt:

https://nuxt.com/blog/v3-8#app-manifest

In that case the meta json files are not generated.

I tried turning off the appManifest option and then rebuilding. Lower versions of Chrome can now access it normally, and the functionality is basically normal. This method is indeed useful.
Thank you!

You can disable app manifest generation in nuxt:

https://nuxt.com/blog/v3-8#app-manifest

In that case the meta json files are not generated.

It works! Thanks a lot.