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

I use Nuxt 3 with Vitest (nuxt-vitest module) and when I run tests, I have this error repeatedmany times:

stderr | unknown test
[nuxt] error caught during app initialization TypeError: window.matchMedia is not a function
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\.nuxt\templates.pwa.client.d26fd198.ts:18:29
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:112:60
    at fn (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:156:44)
    at Object.runWithContext (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:3855:18)
    at callWithNuxt (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:161:24)
    at Object.runWithContext (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:32:29)
    at applyPlugin (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:112:39)
    at Module.applyPlugins (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:125:21)
    at initApp (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\entry.js:55:7)
    at Object.setup (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\vitest-environment-nuxt\dist\index.mjs:125:5)
[nuxt] error caught during app initialization TypeError: $localePath is not a function
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@frontend\nuxt-layer-base\middleware\f24-auth.global.ts:70:57
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\pages\runtime\plugins\router.js:133:26 {
  statusCode: 500,
  fatal: false,
  unhandled: false,
  __nuxt_error: true
}
[Vue warn]: Unhandled error during execution of setup function
  at <Error error= TypeError: window.matchMedia is not a function
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\.nuxt\templates.pwa.client.d26fd198.ts:18:29
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:112:60
    at fn (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:156:44)
    at Object.runWithContext (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:3855:18)
    at callWithNuxt (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:161:24)
    at Object.runWithContext (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:32:29)
    at applyPlugin (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:112:39)
    at Module.applyPlugins (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:125:21)
    at initApp (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\entry.js:55:7)
    at Object.setup (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\vitest-environment-nuxt\dist\index.mjs:125:5) >
  at <Error key=0 error= TypeError: window.matchMedia is not a function
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\.nuxt\templates.pwa.client.d26fd198.ts:18:29
    at C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:112:60
    at fn (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:156:44)
    at Object.runWithContext (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:3855:18)
    at callWithNuxt (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:161:24)
    at Object.runWithContext (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:32:29)
    at applyPlugin (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:112:39)
    at Module.applyPlugins (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\nuxt.js:125:21)
    at initApp (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\nuxt\dist\app\entry.js:55:7)
    at Object.setup (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\vitest-environment-nuxt\dist\index.mjs:125:5) >
  at <NuxtRoot>
[nuxt] error caught during app initialization SyntaxError: Need to install with `app.use` function
    at Module.createCompileError (file:///C:/Users/Jakub%20Schulz/Desktop/PRACA/SAT-TECH%20sp.%20z%20o.o/f24-admin/node_modules/@intlify/core-base/node_modules/@intlify/message-compiler/dist/message-compiler.mjs:54:19)
    at createI18nError (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\vue-i18n\dist\vue-i18n.runtime.mjs:97:34)
    at Module.useI18n (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\vue-i18n\dist\vue-i18n.runtime.mjs:2253:15)
    at Module.useLocalePath (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\vue-i18n-routing\dist\vue-i18n-routing.mjs:980:32)
    at Module.useLocalePath (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@nuxtjs\i18n\dist\runtime\composables.mjs:23:32)
    at setup (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@frontend\nuxt-layer-base\components\view\Error.vue:26:46)
    at callWithErrorHandling (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:156:18)
    at setupStatefulComponent (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7190:25)
    at setupComponent (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7151:36)
    at mountComponent (C:\Users\Jakub Schulz\Desktop\PRACA\SAT-TECH sp. z o.o\f24-admin\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:5555:7) {
  code: 18,
  domain: undefined
}

Workaround When I disable this module and remove VitePwaManifest component from app.vue, tests works fine.

~/app.vue

~/nuxt.config.ts

export default defineNuxtConfig({
	// ...
	modules: [
		// ...
		process.env.NODE_ENV !== 'test' && ['@vite-pwa/nuxt', pwaOptions],
	],
});

Sep 26 '23 10:09 szulcus

@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

Sep 26 '23 10:09 userquin

@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.

Sep 26 '23 10:09 szulcus

@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...

Sep 26 '23 10:09 userquin

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

Sep 26 '23 10:09 userquin

nuxt nuxt copied to clipboard

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

nuxt
nuxt copied to clipboard