N
Nuxt•2mo ago
Asher

One of the glob patterns doesn't match any files warning in vite-pwa/nuxt

im uing "@vite-pwa/nuxt": "^1.0.4" and nuxt 4.1.2 having this error in dev server 
files generated
  ../.nuxt/dev-sw-dist/sw.js.map
  ../.nuxt/dev-sw-dist/sw.js
  ../.nuxt/dev-sw-dist/workbox-7fb42abd.js.map
  ../.nuxt/dev-sw-dist/workbox-7fb42abd.js

 WARN  warnings                                                                                          9:17:53 PM
  One of the glob patterns doesn't match any files. Please remove or fix the following: {
  "globDirectory": "/Users/hided/Documents/GitHub/Anime-Hub/.nuxt/dev-sw-dist",
  "globPattern": "**/_payload.json",
  "globIgnores": [
    "**/node_modules/**/*",
    "sw.js",
    "workbox-*.js"
  ]
}
files generated
  ../.nuxt/dev-sw-dist/sw.js.map
  ../.nuxt/dev-sw-dist/sw.js
  ../.nuxt/dev-sw-dist/workbox-7fb42abd.js.map
  ../.nuxt/dev-sw-dist/workbox-7fb42abd.js

 WARN  warnings                                                                                          9:17:53 PM
  One of the glob patterns doesn't match any files. Please remove or fix the following: {
  "globDirectory": "/Users/hided/Documents/GitHub/Anime-Hub/.nuxt/dev-sw-dist",
  "globPattern": "**/_payload.json",
  "globIgnores": [
    "**/node_modules/**/*",
    "sw.js",
    "workbox-*.js"
  ]
}
for build version i got this error in browser 
Uncaught (in promise) non-precached-url: non-precached-url :: [{"url": "/"}]
at Y.createHandlerBoundToURL (workbox-....)
Uncaught (in promise) non-precached-url: non-precached-url :: [{"url": "/"}]
at Y.createHandlerBoundToURL (workbox-....)
12 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Asher. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The warning you’re seeing from @vite-pwa/nuxt: 
One of the glob patterns doesn't match any files. Please remove or fix the following: {
  "globDirectory": ".../.nuxt/dev-sw-dist",
  "globPattern": "**/_payload.json",
  ...
}
One of the glob patterns doesn't match any files. Please remove or fix the following: {
  "globDirectory": ".../.nuxt/dev-sw-dist",
  "globPattern": "**/_payload.json",
  ...
}
means that the pattern /_payload.json does not match any files in the specified directory. This is not a critical error, but rather a warning that the service worker build process is looking for files matching that pattern and not finding any. This can happen if your Nuxt app (or its current configuration) does not generate any _payload.json files in the .nuxt/dev-sw-dist directory. If you are not using payload extraction or static generation features that would create these files, you can safely ignore this warning, or you can remove or adjust the globPattern in your PWA configuration to avoid the warning. For the build error: 
Uncaught (in promise) non-precached-url: non-precached-url :: [{"url": "/"}]
Uncaught (in promise) non-precached-url: non-precached-url :: [{"url": "/"}]
This error typically means that the root URL ("/") is not being precached by your service worker. This can happen if your PWA configuration does not include the root route in the precache manifest, or if there is a misconfiguration in your glob patterns or ignores. Recommendations: - Review your PWA configuration, especially the globPatterns and globIgnores, to ensure they match the files you actually want to precache. - Make sure that the files you want to be precached (like your index.html or root route) are included in the patterns. - If you are not using _payload.json, you can remove "/_payload.json" from your globPatterns to silence the warning. There is no explicit solution for this exact warning in the knowledge sources, but similar issues with PWA and glob patterns are discussed, and the general advice is to ensure your patterns match actual files and to adjust or remove patterns that do not apply to your project. If you continue to have issues, you may want to check the Vite PWA Nuxt documentation or related GitHub issues for more details, as this is a common configuration warning and not a Nuxt-specific bug. If you are running in development mode, note that some PWA features may behave differently or show warnings/errors that do not appear in production. For example, hydration errors and other PWA-related issues have been reported to only occur in dev mode and not in production builds, as seen in this discussion and related GitHub issues. If you need to further customize which files are ignored or included, you can use the ignore options in your Nuxt config as described in the documentation:
Nuxt ignore option. If you need more specific help, please provide your PWA configuration from nuxt.config and details about your build setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@358819659581227011> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Asher
AsherOP•2mo ago
@kapa.ai here is my nuxt.config.ts 
...
pwa: {
        manifest: {
            name: "hidden",
            short_name: "hidden",
            description: "hidden",
            theme_color: "hidden",
            background_color: "hidden",
            display: "standalone",
            icons: [
                {
                    src: "icons/icon_64x64.png",
                    sizes: "64x64",
                    type: "image/png",
                }
            ],
        },
        workbox: {
            runtimeCaching: [
                {
                    urlPattern: "/*",
                    handler: "NetworkFirst",
                    options: {
                        cacheName: "default-cache",
                        expiration: {
                            maxEntries: 50,
                            maxAgeSeconds: 30 * 24 * 60 * 60,
                        },
                    },
                },
            ],
        },
        devOptions: {
            enabled: true,
            type: "module",
        },
    },
...
pwa: {
        manifest: {
            name: "hidden",
            short_name: "hidden",
            description: "hidden",
            theme_color: "hidden",
            background_color: "hidden",
            display: "standalone",
            icons: [
                {
                    src: "icons/icon_64x64.png",
                    sizes: "64x64",
                    type: "image/png",
                }
            ],
        },
        workbox: {
            runtimeCaching: [
                {
                    urlPattern: "/*",
                    handler: "NetworkFirst",
                    options: {
                        cacheName: "default-cache",
                        expiration: {
                            maxEntries: 50,
                            maxAgeSeconds: 30 * 24 * 60 * 60,
                        },
                    },
                },
            ],
        },
        devOptions: {
            enabled: true,
            type: "module",
        },
    },
kapa.ai
kapa.ai•2mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your nuxt.config.ts and the warning: 
One of the glob patterns doesn't match any files. Please remove or fix the following: {
  "globDirectory": ".../.nuxt/dev-sw-dist",
  "globPattern": "**/_payload.json",
  ...
}
One of the glob patterns doesn't match any files. Please remove or fix the following: {
  "globDirectory": ".../.nuxt/dev-sw-dist",
  "globPattern": "**/_payload.json",
  ...
}
This warning is caused by the PWA plugin (workbox) trying to precache files matching the pattern **/_payload.json, but no such files exist in your .nuxt/dev-sw-dist directory. This is not a critical error, but a warning that the pattern does not match any files. What you can do: - If you are not using Nuxt's payload extraction or static generation features that would generate _payload.json files, you can safely ignore this warning. - To silence the warning, you can adjust your PWA/workbox configuration to remove or change the globPattern so it only matches files that actually exist in your build output. There is no explicit solution for this exact warning in the knowledge sources, but similar issues are discussed, and the general advice is to ensure your glob patterns match actual files and to remove patterns that do not apply to your project. This is a common configuration warning and not a Nuxt-specific bug. If you are running in development mode, such warnings are more likely to appear and can usually be ignored for local development purposes Stack Overflow: PWA not enable with vite-plugin-pwa on Nuxt. If you want to further customize which files are ignored or included, you can use the ignore option in your Nuxt config as described in the documentation Nuxt ignore option. If you continue to see the "non-precached-url" error in production, make sure your service worker is correctly precaching the root route (/). This may require adjusting your PWA configuration to ensure the root is included in the precache manifest. If you need more specific help, please provide your full PWA configuration and details about your build setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@358819659581227011> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
dario
dario•2mo ago
maybe I can help you, lease let me know the detailed error message
Asher
AsherOP•2mo ago
oh really 😄 
Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"/"}]
    at Y.createHandlerBoundToURL (workbox-30cc5b38.js:1:18420)
    at Object.createHandlerBoundToURL (workbox-30cc5b38.js:1:21802)
    at sw.js:1:2214
    at sw.js:1:558
Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"/"}]
    at Y.createHandlerBoundToURL (workbox-30cc5b38.js:1:18420)
    at Object.createHandlerBoundToURL (workbox-30cc5b38.js:1:21802)
    at sw.js:1:2214
    at sw.js:1:558
i saw there was issue on github and they said need to prerender / route but i don't know how to do that seems like added this into nuxt.config.ts it worked 
    nitro: {
        prerender: {
            routes: ["/"],
        },
    },
    nitro: {
        prerender: {
            routes: ["/"],
        },
    },
dario
dario•2mo ago
Hey Asher, that error usually happens because the / route isn’t being pre-rendered, so Workbox can’t find it in the precache list. You can fix it by adding this inside your nuxt.config.ts under the nitro section: nitro: { prerender: { routes: ['/'], }, }, Please try this and let me know if this still gives another error. oh you already found the solution
Asher
AsherOP•2mo ago
yes i tried and it worked thanks you for the help
dario
dario•2mo ago
you are welcome
Asher
AsherOP•2mo ago
have a nice day
dario
dario•2mo ago
Enjoy your day,

Did you find this page helpful?