[@vite-pwa/nuxt] TypeError: window.matchMedia is not a function about nuxt HOT 4 OPEN

@szulcus you can wrap with ClientOnly the VitePwaManifest and your component using $pwa. I need to review plugin registration, it seems Nuxt not picking the proper mode: https://github.com/nuxt/nuxt/blob/main/packages/kit/src/plugin.ts#L36-L39

from nuxt.

@userquin thanks for your fast response. I wrap this component with client-only, but I don't see any difference.

With module and client component:

Without module and with client component:

Without module and component:

I don't use $pwa variable anywhere. By the way, I also have a question. Is / will it be possible to define a manifest from some macro (something like useHead macro and component https://nuxt.com/docs/getting-started/seo-meta)? I'm not a fan of using components for this type of thing.

from nuxt.

@szulcus yeah, you're in test mode and so we need a TestAware sfc wrapper, maybe you can check import.meta.env.MODE (Vitest will expose it with test):

// components/TestAware.client.ts
import { defineComponent } from 'vue'

export default defineComponent({
  async setup(_props, { slots }) {
    if (import.meta.env.MODE === 'test') {
      return () => null
    }

    return () => {
      return slots.default && slots.default({})
    }
  },
})

Then wrap your SFC using the $pwa with <TestAware><YourSFC /></TestAware>, I'll try to add it next week...

from nuxt.

I don't use $pwa variable anywhere. By the way, I also have a question. Is / will it be possible to define a manifest from some macro (something like useHead macro and component https://nuxt.com/docs/getting-started/seo-meta)? I'm not a fan of using components for this type of thing.

Uhmm, so the problem seems to be the auto registration, but if not used why is it failing (check the stack trace)?

You can use the virtual (virtual:pwa-info) and add your own logic, just check https://github.com/vite-pwa/nuxt/blob/main/src/runtime/VitePwaManifest.ts

from nuxt.