search

vite-pwa / nuxt

Zero-config PWA Plugin for Nuxt 3
https://vite-pwa-org.netlify.app/frameworks/nuxt
MIT License
449 stars 22 forks source link

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

Open szulcus opened 1 year ago

szulcus commented 1 year ago

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],
    ],
});
userquin commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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