bad-precaching-response in production build

[VladRDV]

Summary

When I test it with npm run dev, everything works fine, but if I try to test production build on my local machine with npm run build && npm run start, then I get this error in the browser:

Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"http://localhost:3000/static/image/public/images/me.655a7bde7c387da0f74416eed878ae0b.jpg","status":404}]

from workbox-ea903bce.js and service worker status is redundant

Versions

• next-pwa: 5.2.23
• next:11.0.0

How To Reproduce

Steps to reproduce the behavior:

1. Create next.js project
2. Install next-pwa (I've folowed installation instructions to the letter, no custom server btw)
3. put some imges into public folder and use them in some page with next/image <Image/> component
4. run production build and serve with npm run build && npm run star
5. See error in browser devtools, once you open the page

Link to minimal reproduce setup repository if any.

Expected Behaviors

PWA features work with no errors like in development mode

Additional context

I am using typescript

My next.config.js

const withPWA = require("next-pwa");

module.exports = withPWA({
    images: {
        domains: ["picsum.photos"],
    },
    pwa: {
        dest: "public",
    },
});

Browser: Google Crome Version 91.0.4472.114 (Official Build) (x86_64) OS: MacOS Big Sur 11.4

[VladRDV]

upgrading versions to

• next-pwa: 5.2.23
• next:11.0.0 solved the issue :)