shadowwalker / next-pwa

Zero config PWA plugin for Next.js, with workbox 🧰
MIT License
3.89k stars 325 forks source link

Bad precaching Response : _buildManifest.js 404 Not Found #375

Open abhik-b opened 2 years ago

abhik-b commented 2 years ago

image 1

I did not had this issue earlier when I created the project in 2021 but now I am having it all of sudden !!!

My Dependencies are : "next": "10.0.5", "next-pwa": "^5.2.9", "react": "17.0.1", "react-dom": "17.0.1"

Way to Reproduce :

I followed the offline-fallback example. then ran npm run build & npm run start

image

next-config.js : image

Code : https://github.com/abhik-b/next-tutorial/tree/pwa

Something I noticed is every time I build & start (npm run build,npm run start) the id XqnQis_M5nopgmlKXkZ3e remains same for bad pre caching response ("url":"http://localhost:3000/_next/static/XqnQis_M5nopgmlKXkZ3e/_buildManifest.js") but the id in sources tab in static folder changes ( here : oSzOSegFPDSfJVsx803mJ ) . So I am assuming that somehow the _buildManifest.js url is fixed with this id & that is why the pre caching is failing!!! I tried this with other browsers as well !

image 2

Please help me out 🤞

AhsanSarwar45 commented 2 years ago

This worked for me https://github.com/shadowwalker/next-pwa/issues/288#issuecomment-953799577

abhik-b commented 2 years ago

Yeah I tried that before posting my issue here , it did not work for me !!!!

Misiu commented 2 years ago

In my case after upgrading from 5.5.4 to 5.5.5 I'm getting errors with URL: /_next/static/bGWRlkfVvBotI6NYz-q5I/_buildManifest.js

When downgraded to 5.5.4 this error is gone, but some images aren't displaying.

NumanIbnMazid commented 1 year ago

Verify that if your case matches below case:

bad-precaching-response: bad-precaching-response :: [{"url":"https://nim23.com/_next/static/autoGeneratedDynamicFolder/_buildManifest.js","status":404}]

If autogeneratedDynamicFolder in your local build (something like dh1XL261dMTiSD1XlJlZy) and the one where you are getting this error are not same, then the below solution might work:

module.exports = withPWA({
  generateBuildId: async () => {
    return 'your-custom-build-identifier'
  },
  swcMinify: true,
  reactStrictMode: true,
  // .... your other configs
 }
})

This basically points to generate and use the specified folder instead of generating folder with random name.