Fixing middleware-runtime.js error

[pascuflow]

Fixing this annoying middlware precaching errors that pops up.

[pascuflow]

@HT-Moh No, I'm finished, I just thought to add /server/pages/_middleware.js at the last minute, but not going to consider where eveyone might put this file so it will be up to everyone to add this line if they are using the new _middleware feature buildExcludes: [/server\/pages\/{your_route_to}\/_middleware\.js$/].

[scglenn]

Lets get this merged!

[vborodulin]

hi, when fix will be in npm release?

[shadowwalker]

Published 5.4.5

[vborodulin]

forgot about middleware-runtime.js.map

[Croustys]

After updating to 5.4.5 I still happen to experience the error, which was supposed to be fixed, however I have no idea why.

Is it just me, or anyone else still encountering it?

[bde-maze]

Same here and it seems to prevent the PWA to work properly and to be installed.
Result when running a lighthouse diagnostic:

[Croustys]

I actually fixed my problem by adding buildExcludes: [/_middleware.js$/] into my nextconfig file

[pascuflow]

It's working fine here, hosting via ngrok, started with a fresh build using 5.4.5:

1: Delete sw.js and workbox-xxxxx.js from /public
2: Delete node_modules
3: Delete .next folder
4: npm install
5: next build
6: next start -p 3040

On my Android phone, I get the prompt in Chrome to add to homescreen. Not saying lighthouse is showing a false positive but don't see anything on the console.

const withPWA = require('next-pwa')
const runtimeCaching = require("next-pwa/cache");
const removeImports = require('next-remove-imports')();

module.exports = removeImports(withPWA({
    swcMinify: true,
    webpack5: true,
    pwa: {
        disable: process.env.NODE_ENV === 'development',
        dest: 'public',
        register: true,
        sw: '/sw.js',
        buildExcludes: [/server\/pages\/_middleware\.js$/],
        runtimeCaching: runtimeCaching
    },```

[bde-maze]

@pascuflow I followed the same exact steps but stil end up with the console error :

Also here is my next config file:

const withPWA = require("next-pwa")
const { withSentryConfig } = require("@sentry/nextjs")
const runtimeCaching = require("next-pwa/cache")
const prod = process.env.NODE_ENV === "production"
const nextTranslate = require("next-translate")

// modification from the original PWA configuration due to an error -> https://github.com/shadowwalker/next-pwa/issues/295
const moduleExports = withPWA({
  reactStrictMode: true,
  pwa: {
    dest: "public",
    mode: "production",
    register: true,
    skipWaiting: true,
    runtimeCaching,
    buildExcludes: [
      /\/\_next\/server\/middleware\-runtime\.js\.map$/,
      /\/_next\/server\/middleware-runtime.js.map$/,
      /\/\_next\/server\/pages\/\_middleware\.js\.map$/,
      /\/_next\/server\/pages\/_middleware.js.map$/,
      /server\/middleware\-manifest\.json$/,
      /server\/middleware-manifest.json$/,
      /server\/middleware\-runtime\.js$/,
      /server\/middleware-runtime.js$/,
      /server\/middleware\-runtime\.js\.map$/,
      /server\/middleware-runtime.js.map$/,
      /server\/pages\/\_middleware\.js$/,
      /server\/pages\/_middleware.js$/,
      /pages\/\_middleware\.js$/,
      /pages\/_middleware.js$/,
      /middleware\-manifest\.json$/,
      /middleware-manifest.json$/,
      /middleware\-runtime\.js$/,
      /middleware-runtime.js$/,
      /\_middleware\.js$/,
      /_middleware.js$/,
      /\_middleware\.js\.map$/,
      /_middleware.js.map$/,
      /\_middlewareManifest\.js/,
      /_middlewareManifest.js/,
    ],
  },

Anyone have any leads, insight, clue of why the exclude does not catch the "/_next/server/middleware-runtime.js.map" file ?

Thanks

[shadowwalker]

Upgrade to latest version 5.4.7 should help you fix the issue.
Besides as a tip, most you could remove default runtimeCaching and buildExcludes from your config as those doesn't do anything.