Broken service-worker because of double slashes in URLs

Issues
,
1

Hello guys,
I created simple NextJS app with next/image module and deployed it to layer0.
The problem is that the service-worker doesn’t seem to work because of double slashes in URL of images in service-worker.js file.
These URLs are added to cache when service worker is registered. There are listed URLs almost of all NextJS files but only the images have double slashes in URL.
Example from service-worker.js file:

[
	{'revision':'cc654fefba9a52fc1a3f6e78c0fd4a25','url':'/_next//static/media/2.7cb34891.jpg'},
	{'revision':'44644d4839d4eabb2c116b5fa002c0b0','url':'/_next//static/media/5.5018a6bb.jpg'},
	{'revision':'9436c4680003754445da11b0e084cc5d','url':'/_next/server/middleware-build-manifest.js'}
]

The NextJS server then returns 404 error to these URLs and service-worker won’t register.
Everything works when I build and run app locally even though double slashes are still there.

Here is the deployed app source code.
Is it problem of layer0, NextJS or do I need to add something to webpack config to make it work?

Thank you for any advices.

2

It seems all those images that you are importing get the incorrect path consisting of /_next//static/.... The ones that Workbox can cache are showed in the manifest of your SW. The others aren’t part of the manifest because they are too large per the warning in the console.

I haven’t narrowed down where the issue is coming from other than importing the images and referencing them that way causes the issue. Since they are in the public directory, any reason not to reference them using <Image src="/img/1.jpg" ... />

This does happen in Next.js dev mode without Edgio/Layer0. You can see the same just by running npm run dev and look at the bundled SW or the build output.

3

(post deleted by author)

4

So moving files from public/ to different folder doesn’t help.
The problem seems to be same as in this case: https://github.com/speniti/laravel-mix-workbox/issues/6.

layer0 init CLI command adds it’s own config with withServiceWorker() function to next.config.js file.
Calling withServiceWorker() function from @layer0/next/config adds default config for workbox-webpack-plugin.

The problem can be solved by setting custom value of output: { publicPath: '' } param to webpack config or modifying default manifestTransforms function supplied by layer0 package in @layer0/next/sw/withServiceWorker.js/ts.

5

Thanks for the link to that workbox issue - very helpful. I will create a ticket for us to dive into this further with a resolution.

6

Our team has merged in a fix for this issue and it will be available in v4.18.0. Thank you for reporting!

1 Like