Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
szulcus opened this issue Sep 26, 2023 · 4 comments
Open

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

szulcus opened this issue Sep 26, 2023 · 4 comments
Labels
bug Something isn't working enhancement New feature or request pr welcome

Comments

@szulcus
Copy link

szulcus commented Sep 26, 2023

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
image

~/nuxt.config.ts

export default defineNuxtConfig({
	// ...
	modules: [
		// ...
		process.env.NODE_ENV !== 'test' && ['@vite-pwa/nuxt', pwaOptions],
	],
});
@szulcus szulcus changed the title [] TypeError: window.matchMedia is not a function [@vite-pwa/nuxt] TypeError: window.matchMedia is not a function Sep 26, 2023
@userquin
Copy link
Member

@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

@szulcus
Copy link
Author

szulcus commented Sep 26, 2023 •
edited

@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:
image

Without module and with client component:
image

Without module and component:
image

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.

@userquin
Copy link
Member

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

@userquin
Copy link
Member

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

@userquin userquin added bug Something isn't working enhancement New feature or request pr welcome labels Sep 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working enhancement New feature or request pr welcome
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@userquin @szulcus