quick fix

next.config.js

const withPWA = require("next-pwa");
const runtimeCaching = require("next-pwa/cache");

module.exports = withPWA({
  pwa: {
    runtimeCaching,
    buildExcludes: [/middleware-manifest.json$/]
  },
});

quick fix

next.config.js

const withPWA = require("next-pwa");
const runtimeCaching = require("next-pwa/cache");

module.exports = withPWA({
  pwa: {
    runtimeCaching,
    buildExcludes: [/middleware-manifest.json$/]
  },
});

I don’t think this would cause any issues in practice but there should probably be a backslash before the dot inside the RegEx.

/middleware-manifest\.json$/

I am still experiencing this issue with "next-pwa": "5.6.0" and "next": "^12.3.2-canary.26":

Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://selfbuilder.dev.net/_next/static/2RXrQaPIzCmiQWV2lQJrv/_buildManifest.js","status":404}]

My config:

{
  dest: "public",
  disable: process.env.NODE_ENV === "development",
}

I too am still having an issue with this

I still encounter this issue with 5.4.1 using:

pwa: {
    dest: 'public'
}

@FDiskas

please reopen the issue as the same still happens

Btw, getting the same thing if you have _offline page defined. adding it to buildExcludes array works, but I don’t think that should be excluded?

I don’t have a clue how this stuff even works lol, I’m pretty new to PWA’s so can’t help you there. Just wanted to try nextjs 12 and noticed the pwa tab in lighthouse broke, so here I am.

For me, this happened after:

1. I ran a build (locally) which created an sw.js file in my /public dir, and then
2. I ran npm run dev.

After manually deleting sw.js I no longer had issues.

I also updated my package.json as follows:

{
  "scripts": {
    "dev": "rm public/sw.js & next dev",

Same here with:

• next@12.2.4
• next-pwa@5.5.5

I’m also getting this warning:

GenerateSW has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate! Please see https://github.com/GoogleChrome/workbox/issues/1790 for more information.

@shadowwalker

I got the same error and fixed with above workaround.

Then I got those errors with Preact+NextJS through Preact plugin.

ksengine.vercel.app/:1 
        
       GET https://ksengine.vercel.app/_next/static/chunks/framework-fad1cf520aaa9a55.js net::ERR_ABORTED 404
ksengine.vercel.app/:1 
        
       GET https://ksengine.vercel.app/_next/static/wTOm-zS7CDl9kBwvJRQ4u/_buildManifest.js net::ERR_ABORTED 404
ksengine.vercel.app/:1 
        
       GET https://ksengine.vercel.app/_next/static/wTOm-zS7CDl9kBwvJRQ4u/_ssgManifest.js net::ERR_ABORTED 404
ksengine.vercel.app/:1 
        
       GET https://ksengine.vercel.app/_next/static/chunks/main-509d6cba0a25ac9d.js net::ERR_ABORTED 404
ksengine.vercel.app/:1 
        
       GET https://ksengine.vercel.app/_next/static/chunks/pages/_app-b164ac5595c86b8a.js net::ERR_ABORTED 404
ksengine.vercel.app/:1 
        
       GET https://ksengine.vercel.app/_next/static/wTOm-zS7CDl9kBwvJRQ4u/_middlewareManifest.js net::ERR_ABORTED 404
ksengine.vercel.app/:1 
        
       GET https://ksengine.vercel.app/_next/static/chunks/pages/index-8edeb82041b633db.js net::ERR_ABORTED 404

and fixed by removing Preact. How can I fix this?

not working(((

Hello! This fix has worked for me, but lighthouse seems to break when trying to run a test. It hangs up forever and produces the following error: Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope...

Any ideas? Thanks! 🙌

facing the same issue

Add thumbs up and hit subscribe button. You don’t need to ping everybody. In my case provided workaround worked

just adding a +1, getting the same error.

I added an empty _middleware.ts function in the /pages directory and it seems to at least register the SW now, but I’m still getting the bad-precaching-response.

// pages/_middleware.ts
import type { NextFetchEvent, NextRequest } from "next/server";

export function middleware(req: NextRequest, ev: NextFetchEvent) {}

Still not fixed in 5.6.0, getting a similar error myself: Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"http://localhost:8084/_next/static/503s2A1ywwygIF0aaUq6z/_buildManifest.js","status":404}]

"next": "12.2.5",
"next-pwa": "5.5.5",

[21/08/22]

@shadowwalker this issue exists again since the last release:

workbox-e7ea62c2.js:1 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"http://localhost/_next/static/KvFkEveQoLh_dME2rnKzW/_buildManifest.js","status":404}]

Hi guys, it seems he has stopped working since December 2021. 😥

@TimoWilhelm it doesn’t help with next 12.0.9 and next-pwa 5.4.4

Does anyone know what the impact of excluding the middleware-manifest.json file as part of the build?

It does seem to fix issue by removing any references in the compiled sw.js file but I’m wary of just removing a file without understanding what it does…

Same problem here

Solved by v5.4.1?

Also facing this issue on next 12.0.3 and next-pwa 5.4.0.

Hello! This fix has worked for me, but lighthouse seems to break when trying to run a test. It hangs up forever and produces the following error: Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope... Any ideas? Thanks! raised_hands

Having this exact same problem, currently.

same issue for me

When using nested middlewares and middleware-chunks, this has done the trick for me:

const withPwa = require('next-pwa');
const runtimeCaching = require('next-pwa/cache');

...
{
    pwa: {
        disable: process.env.NODE_ENV === 'development',
        dest: 'public',
        register: true,
        runtimeCaching,
        buildExcludes: [
            /\/*server\/middleware-chunks\/[0-9]*[a-z]*[A-Z]*\.js$/,
            /middleware-manifest\.json$/,
            /middleware-runtime\.js$/,
            /_middleware\.js$/,
            /^.+\\_middleware\.js$/,
        ],
        publicExcludes: ['!robots.txt'],
    }
}
...

Hey @FDiskas to be honest, i’ve tried almost every single suggestion i have found so far. Sadly nothing works

Still not working  😭 Using: "next": "^12.1.0" "next-pwa": "^5.4.6"

My config:

/** @type {import('next').NextConfig} */

const nextConfig = withPWA({
  reactStrictMode: process.env.NODE_ENV === "development",
  images: {
    deviceSizes: [360, 640, 750, 828, 1080, 1200],
  },
  pwa: {
    dest: "public",
    disable: process.env.NODE_ENV === "development",
  },
});
module.exports = nextConfig;

UPDATE: I did try almost everything, nothing helps so far. App is deployed on heroku just FYI, not sure if this makes any difference but just in case…

Indeed @sfiquet , I’m experiencing the same issue.

Solved by v5.4.1?

Should be solved so far

Same problem here, the requested middleware json file does not exist, neither a server folder inside _next exists, there are only __private and _static folder there. At least on Vercel, on localhost exists the .next folder

Faced the same issue with next version 12.0.2. Excluding middleware-manifest.json worked.

same issue just when bumping next.js version to 12.0.2, without using any _middleware

Hello! This fix has worked for me, but lighthouse seems to break when trying to run a test. It hangs up forever and produces the following error: Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope...

Any ideas? Thanks! 🙌

Didn’t notice this before but yeah, I’ve got the same issue. Unchecking the “Clear storage” option in Lighthouse seems to help.

Edit: I’m actually not sure it’s related to Next v12. Just tried running Lighthouse against our production site which is still running on Next 10.0.8 and I’m getting the same issue there. Maybe it’s a new Chromium bug? I’m certain Lighthouse used to work with no issues in the past.