[Bug]: Fast Refresh had to perform a full reload.

[timohausmann]

Provide environment information

Using next.js 14 and pages router, running npm run dev, following the docs, I get endless loops of refreshs. It says in the node console:

⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload

It does not happen on the first request, but when I hit CTRL+R once.
Any idea what could be the issue / why it's refreshing the page endlessly?

Which project is this issue for?

@serwist/next

Link to reproduction - Issues with a link to complete (but minimal) reproduction code help us address them faster

on demand

To reproduce

(I just upgraded from next 13 to 14 to use this lib, I hope that is not the issue, everything else seem to work normally)

• Follow this guide https://serwist.pages.dev/docs/next/getting-started
• npm run dev
• Open the page: everything looks good
• Hit Ctrl+R
• The site now refreshes endlessly
• To make it calm down again, I can unregister the Service Worker

Describe the bug

Endless loop of browser reload and the warning (see above)

Expected behavior

No endless refresh loop.

Screenshots (if relevant)

No response

Additional information (if relevant)

No response

[DuCanhGH]

Yeah this is an age-old issue, but I have not investigated it. Sounds like something is being unexpectedly cached, though.

[timohausmann]

It seems to only occur in dev, so maybe I could disable the SW in dev if I'm not working on it.

[timohausmann]

Since Next' preloading etc. behaves differently in dev mode, I found it best to only test the SW in production build.

const withSerwist = require("@serwist/next").default({
    swSrc: "./sw.ts",
    swDest: "public/sw.js",
    disable: process.env.NODE_ENV === 'development',
});

That solves the issue for me, feel free to close.

[DuCanhGH]

@timohausmann no, let's keep it open. Dev mode is supported, and as such, we will need it to work properly. This clearly causes it to not.

[Xardasus]

I get the same issue, also added disable: process.env.NODE_ENV === 'development',
running dev on Next.js 14.1 "dev": "next dev --experimental-https".
Something is getting cached and making it full reload, had to delete caches via the Dev tools.

[DuCanhGH]

@Xardasus if you use installSerwist + runtimeCaching like in basically any Next.js example in the docs, please disable runtimeCaching in development mode:

runtimeCaching: process.env.NODE_ENV === "development" ? undefined : defaultCache,

This feature can cause JS assets to be accidentally outdated, which is not something you want in development mode.

You may also clear the caches just in case.

In Serwist v9, runtimeCaching will be disabled by default in development mode, but this won't be backported to Serwist v8.

Hope this helps!

[Xardasus]

Many thanks @DuCanhGH, looks like it's working