Question about path prefixes, `bad-precaching-response`, and Webpack 5

4cm4k1 commented 3 years ago

Hi!

I have a question, which may or may not be related directly to next-offline. I'm using the latest canary Next.js, latest Preact, and newly released Webpack 5. I think the latter is what enabled this issue to crop up, and I am wondering if it's an upstream bug in Webpack or in copy-webpack-plugin, and regardless, how to work around it, for now. It seems that when the SW is generated the paths for precached assets come out starting with autostatic/ rather than _next/static/ (see below), which, of course, causes 404s, which in turn causes Workbox to report a bad-precaching-response (see below). Importantly, all of precached assets 404, and the PWA/SW functionality is effectively broken.

Source: https://github.com/4cm4k1/personal-website Live demo: https://anthony.app Build logs: https://anthony.app/logs

Has anyone encountered this yet? Thoughts?

Many thanks, Anthony

Error:

Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://anthony.app/autostatic/DVpCfgt5Y28njSHCjdFEh/_buildManifest.js","status":404}]
    at M.T (https://anthony.app/sw.js:1:11260)
    at async Promise.all (index 0)
    at async M.install (https://anthony.app/sw.js:1:10673)

Precached assets array (from /sw.js) with incorrect path prefixes:

[{
    url: "autostatic/DVpCfgt5Y28njSHCjdFEh/_buildManifest.js",
    revision: "b828089b817d2cc5f7db369af2d7e61f"
}, {
    url: "autostatic/DVpCfgt5Y28njSHCjdFEh/_ssgManifest.js",
    revision: "b6652df95db52feb4daf4eca35380933"
}, {
    url: "autostatic/chunks/71247caf95475e3ea7f9a0f8a30beb258b23d005-100cca586698a7dc8fc7.js",
    revision: "f7004216093d35585ee49119e4d721ed"
}, {
    url: "autostatic/chunks/commons-23016b9ed08e87cf2671.js",
    revision: "14f1a9ee7e89a6530b9cd153d2eab295"
}, {
    url: "autostatic/chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3-5a5244574947607b33b1.js",
    revision: "8076cf0dba77c1d547e90d36f95087ab"
}, {
    url: "autostatic/chunks/framework-e6351765ddbfc14b7efb.js",
    revision: "2c6558ac547bca137fc5b5a824c7a902"
}, {
    url: "autostatic/chunks/main-053e7e41ad2ddf5f6040.js",
    revision: "1c030aa6f692a9958e9ad78bbb3c3ccf"
}, {
    url: "autostatic/chunks/pages/_app-43b7490134685912df8e.js",
    revision: "940eab5bd534497342c883af49eacb0f"
}, {
    url: "autostatic/chunks/pages/_error-aded1b4224b797e4c31f.js",
    revision: "98e8c3df75c20c38b96931f6e325397f"
}, {
    url: "autostatic/chunks/pages/about-b530605eb4ae71eef836.js",
    revision: "03b1034527b29304825bcb3ea0678ecc"
}, {
    url: "autostatic/chunks/pages/contact-8393ebfb67fe53e4fc1b.js",
    revision: "e4a3c25f214f6a5780e69e6c59b45966"
}, {
    url: "autostatic/chunks/pages/index-4f58f5d153f83505e8f0.js",
    revision: "83162c707afef1059827a200ca389457"
}, {
    url: "autostatic/chunks/pages/projects-e4cb9b27286f21039c67.js",
    revision: "aa1149f52cb775a877bc23fcf43c71f0"
}, {
    url: "autostatic/chunks/polyfills-d7f52f3c43a22568af0d.js",
    revision: "d8c2aed9963c3d223376f8faebdd2746"
}, {
    url: "autostatic/chunks/webpack-a5ab6a8ac6e825e9df64.js",
    revision: "a9a0f524021f5fe680e730084c3fc295"
}, {
    url: "autostatic/css/a20c5decbd90b7a9cdaa.css",
    revision: "f7230acd32cbced89c879b456966b15f"
}]

kikoanis commented 3 years ago

I don't think this is related next-offline but rather to workbox-webpack-plugin. Till it gets fixed to go with webpack 5, you could run post-build command using libraries like https://www.npmjs.com/package/replace-in-files-cli. Something like "replace-in-files --string=\"autostatic/\" --replacement=\"static/\" \"src/.next/service-worker.js\"" could work.

4cm4k1 commented 3 years ago

Thank you for your insight! Your workaround sounds good, too.

kaleabmelkie commented 3 years ago

I had the same exact issue (with a webpack 5.9.0 & preact setup). This simple option in next.config.js worked for me:

withOffline({
  workboxOpts: {
    // ...
    modifyURLPrefix: { 'autostatic/': '_next/static/' },
  }
})

Inspiration for this fix was a comment from a 2017 issue in GoogleChrome/workbox#689.

Maybe, a potential quick fix in the code of this repo would be adding 'autostatic/': '_next/static/', in packages/next-offline/index.js#L18, like:

const defaultInjectOpts = {
  exclude: preCacheManifestBlacklist,
  modifyURLPrefix: {
    'autostatic/': '_next/static/', // new addition
    'static/': '_next/static/',
    'public/': '_next/public/',
  },
};

@hanford, what do you think?

hanford / next-offline

Question about path prefixes, `bad-precaching-response`, and Webpack 5 #263