Nuxt3 + PWA warnings in terminal

[Krystus]

Is it normal that after PWA implementation in terminal I see warnings like that?

WARN warnings 6:49:09 PM
One of the glob patterns doesn't match any files. Please remove or fix the following: {
"globDirectory": "/Users/x/Vue/xx/.nuxt/dev-sw-dist",
"globPattern": "/*.{json,ico,svg,ttf,woff,css,scss,js,html,txt,jpg,png,woff2,mjs,otf,ani}",
"globIgnores": [
"/node_modules//",
"sw.js",
"workbox-.js"
]
}
One of the glob patterns doesn't match any files. Please remove or fix the following: {
"globDirectory": "/Users/x/Vue/xx/.nuxt/dev-sw-dist",
"globPattern": "_nuxt/builds//.json",
"globIgnores": [
"/node_modules//",
"sw.js",
"workbox-*.js"
]
}

WARN [Vue Router warn]: No match found for location with path "/sw.js.map"

WARN [Vue Router warn]: No match found for location with path "/sw.js.map"

WARN [Vue Router warn]: No match found for location with path "/sw.js.map"

WARN [Vue Router warn]: No match found for location with path "/sw.js.map"

WARN [Vue Router warn]: No match found for location with path "/workbox-63ce180e.js.map"

WARN [Vue Router warn]: No match found for location with path "/workbox-63ce180e.js.map"

WARN [Vue Router warn]: No match found for location with path "/workbox-63ce180e.js.map"

WARN [Vue Router warn]: No match found for location with path "/workbox-63ce180e.js.map"

[mojjjtaba]

I got the same error

[userquin]

About workbox warnings, check https://vite-pwa-org.netlify.app/guide/faq.html#suppress-workbox-build-warnings-in-dev

About router warnings, try update to latest nuxt 3.11.2

[ivanushkaPr]

Same here.

PWA v0.20.0
mode generateSW
precache 1 entries (0.00 KiB)
files generated
.nuxt/dev-sw-dist/sw.js.map
.nuxt/dev-sw-dist/sw.js
.nuxt/dev-sw-dist/workbox-9637eeee.js.map
.nuxt/dev-sw-dist/workbox-9637eeee.js

WARN warnings
One of the glob patterns doesn't match any files. Please remove or fix the following: {
"globDirectory": "/app/.nuxt/dev-sw-dist",
"globPattern": "_nuxt/builds//*.json",
"globIgnores": [
"/node_modules/**/",
"sw.js",
"workbox-.js"
]
}

[RomanKollerSnoop]

Check if adding this will fix your issue:

pwa: {
workbox: {
globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
},
},

[ivanushkaPr]

Check if adding this will fix your issue:

pwa: { workbox: { globPatterns: ['**/*.{js,css,html,png,svg,ico}'], }, },

That doesnt change anything.

[RomanKollerSnoop]

Check if adding this will fix your issue:
pwa: { workbox: { globPatterns: ['**/*.{js,css,html,png,svg,ico}'], }, },

That doesnt change anything.

The issue was gone for me when i set it up like this.
This is my full config:
`
const sw = process.env.SW === 'true'

pwa: {
    strategies: sw ? 'injectManifest' : 'generateSW',
    srcDir: sw ? 'public' : undefined,
    filename: sw ? 'sw.ts' : undefined,
    registerType: 'autoUpdate',
    pwaAssets: {
        config: true,
    },
    workbox: {
        globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
    },
    injectManifest: {
        globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
    },
    client: {
        installPrompt: true,
        periodicSyncForUpdates: 3600,
    },
    devOptions: {
        enabled: true,
        suppressWarnings: true,
        navigateFallback: '/',
        navigateFallbackAllowlist: [/^\/$/],
    },
    manifest: {

...
},
},
`

And the service worker "sw.ts" in the public folder like this:

/// <reference lib="WebWorker" />
/// <reference types="vite/client" />
import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
import { clientsClaim } from 'workbox-core'
import { NavigationRoute, registerRoute } from 'workbox-routing'


// eslint-disable-next-line no-undef
declare let self: ServiceWorkerGlobalScope

// self.__WB_MANIFEST is default injection point
precacheAndRoute(self.__WB_MANIFEST)

// clean old assets
cleanupOutdatedCaches()

let allowlist: RegExp[] | undefined
if (import.meta.env.DEV) {
    allowlist = [/^\/$/]
}

// to allow work offline
registerRoute(new NavigationRoute(
    createHandlerBoundToURL('/'),
    { allowlist },
))

self.skipWaiting()
clientsClaim()

Note that i use pwaAssets. So you might need to remove that line or install it if u need.

[gregpalaci]

Saw this solution on another issue forget where, helped me with a similar but different issue
nuxt.config >>

experimental: {
		payloadExtraction: false
	},

[userquin]

I need to check these experimental flags in Nuxt (maybe we need to change the way we detect these 2 flags => maybe in latest Nuxt version not experimental): https://vite-pwa-org.netlify.app/frameworks/nuxt.html#payload-extraction

[gregpalaci]

Not sure what this does maybe also relevant @userquin
https://github.com/elk-zone/elk/blob/main/nuxt.config.ts#L54C4-L54C30

[Tofandel]

I tried all the suggestions here but only managed to get rid of the workbox warning about glob (which was completely valid)

But the router warnings seem to come from something trying to make requests to those urls, which apparently don't exist

This really pollutes the logs especially when you have trailing slash redirects and i18n redirects

Here is an example of just one request to the home page, now imagine trying to find logs in this

web:dev:  WARN  [Vue Router warn]: No match found for location with path "/sw.js/"
web:dev:
web:dev:
web:dev:  WARN  [Vue Router warn]: No match found for location with path "/sw.js/"
web:dev:
web:dev:
web:dev:  WARN  [Vue Router warn]: No match found for location with path "/hu/sw.js/"
web:dev:
web:dev:
web:dev:  WARN  [Vue Router warn]: No match found for location with path "/sw.js/"
web:dev:
web:dev: 
web:dev:  WARN  [Vue Router warn]: No match found for location with path "/sw.js"
web:dev:
web:dev:
web:dev:  WARN  [Vue Router warn]: No match found for location with path "/workbox-c4af092c.js"
web:dev:
web:dev:
web:dev:  WARN  [Vue Router warn]: No match found for location with path "/workbox-c4af092c.js"
web:dev:
web:dev:
web:dev:  WARN  [Vue Router warn]: No match found for location with path "/workbox-c4af092c.js/"
web:dev:
web:dev:
web:dev:  WARN  [Vue Router warn]: No match found for location with path "/workbox-c4af092c.js/"
web:dev:
web:dev:
web:dev:  WARN  [Vue Router warn]: No match found for location with path "/workbox-c4af092c.js/"
web:dev:
web:dev:
web:dev:  WARN  [Vue Router warn]: No match found for location with path "/hu/workbox-c4af092c.js/"
web:dev:
web:dev:
web:dev:  WARN  [Vue Router warn]: No match found for location with path "/workbox-c4af092c.js/"

[Tofandel]

I went into the application panel and unregistered the service worker there

No more requests and logs, apparently it got registered when I visited nuxt in built mode served on node locally and the service worker module is not enabled in serve mode (maybe it should serve an unregistration worker in serve mode instead)

[gregpalaci]

@Tofandel
last thing that helped me set this "injectionPoint"

injectManifest: {
			injectionPoint: undefined,
			globPatterns: ["**/*.{js,css,html,png,svg,ico}"]
		},
		```

source https://vite-pwa-org.netlify.app/guide/inject-manifest.html#service-worker-code