Setting to Turn Off "Fast Refresh" and to stop Next.js from automatically reloading the page against my will

[meglio]

Describe the feature you'd like to request

The ability to turn Fast Refresh OFF and stop Next.js from refreshing my page automatically against my will.

Describe the solution you'd like

A configuration setting that would disable Fast Refresh and let me refresh the page in browser manually.

Describe alternatives you've considered

Dear team, some 3rd party libraries are not compatible with Fast Refresh. I cannot a) ask every library developer to fix their libraries to work with Next.js Fast Refresh; and b) wait for them to complete the updates.

Why can't we just switch Fast Refresh OFF with a configuration option and move on with using custom 3rd party packages with Next.js?

Please reopen this issue - it is an issue as it's simply not a viable option to get all libraries respect requirements imposed by the Fast Refresh feature of Next.js

For instance, I'd like to turn it off entirely for the whole project as I am using a 3rd party in-house library that is not compatible with Fast Refresh and will not be made so in the next year at least, if at all.

---

The second argument against Fast Refresh is that it is not sophisticated enough to preserve the state when I need it preserved, and it keeps refreshing the page against my will. I just want to stop it and keep hitting F5 or Command-R to refresh the page in the browser manually.

The experience of the page being updated against my will when I don't need it is frustrating.

[meglio]

Hey team, why did a feature request become a discussion? It's that simple, make a way to let Next.js stop refreshing the page - what can be wrong about having a way to control this simple behavior? What kind of discussion do you expect? Do you want to find people who'll say that's not an issue? Of course there are people who don't need this setting.

[simon360]

Have you looked into customising Next's webpack config? I expect you could find the fast refresh plugin/config in there and disable it.

[meglio]

@simon360 could you help with that? it's undocumented, so at least a minimal hint / example is needed in documentation.

It is weird that I have to opt out of special functionality instead of opting in for it.

I can understand Next.js refreshing the page when the source code changes. But just refreshing it automatically every N seconds is making me freak out sometimes. Actually, quite often:

• when debugging
• when analyzing updates to the database made with every page refresh
• when inspecting my HTML in browser, after all!

There are adult people who can hit Command+R / F5 when they need to. Please, just make it possible to turn this automatic refresh every N seconds OFF, otherwise it stays in the way of working efficiently.

[chipit24]

I tried disabling it with the following in my next.config.js file:

module.exports = {
  /* ... */
  webpack(config) {
    config.plugins = config.plugins.filter(plugin => {
      return plugin.constructor.name !== 'ReactFreshWebpackPlugin';
    });

    return config;
  },
};

However, this broke my app with the following error:

Uncaught ReferenceError: $RefreshSig$ is not defined

I didn't spend much time with it so I'm sure there's something obvious I'm missing (editing the babel config, etc.). But +1 for getting a documented way to disable fast refresh / HMR.

[benkingcode]

@meglio there is no "refresh every N seconds" as far as I'm aware

[kevinseabourne]

I was looking to disable fast refresh also. I have my prettier format on save, and If I don't type fast enough. It formats due to fast refresh on every change and my code is all over the place. I ended up just disabling prettier (format on save) and have it set to manual with the keymap the same as formatting on save before fast refresh (cmd + s)
seems way better, my code is running on every change and I can format whenever I want.

[ivanmaeder]

I've come to this because of what I thought may have been a bug but is apparently the expected behaviour. Also I think I have a slightly different perspective to @meglio's original post.

Right now I'm working on a Stripe integration and I'm having some issues with automatic reloading:

• A page that uses getServerSideProps() and has side effects: I really don't want this page to run out of the blue (some setup is required and if it runs before the setup is finished I have to start again)
• A webhook which—I think—sometimes refreshes just as it's being invoked (I can't control when it gets called but I guess even if I could, I can't always predict when automatic reloading might run)

The general feeling of not being in control is very frustrating and I'd rather sacrifice automatic reloading completely, at least in certain scenarios.

Thanks 👍

[siscodev93]

I was working with an api and got kicked after refreshing so many times. I have a tendency to ctrl+s every couple of key strokes - this hit the api at least 500 times since every reload counts for 3 hits? Regardless I'm glad it was a free access point if it was AWS I woulda racked up a bill :/

[Pickra]

Hey @meglio, I'm having the same problem. Still trying to debug to see if there's anything I can do w/my code or at least identify the cause. You mention...

...some 3rd party libraries are not compatible with Fast Refresh.

Are you referring to the Fast Refresh limitations?
Any details will be helpful.

Thank you.

[meglio]

Hi @Pickra , in my particular case, I'm using an internal corporate library that servers multiple websites with multi-million traffic. I have no option to stop using that library.

[Pickra]

Thank you for responding @meglio . I specifically want to know, what you mean by

some 3rd party libraries are not compatible with Fast Refresh.

Do you mean this? - https://nextjs.org/docs/basic-features/fast-refresh#limitations

[meglio]

Yeah, those libraries simply cannot satisfy all the requirements listed in that Fast Refresh article.

[Pickra]

Thanks again @meglio. I know people who love nextjs but it ain't working for my app so I ripped it out.

[meglio]

New [Fast Refresh] rebuilding entries in developer console are displayed time to time without me touching a single file of the codebase. It is very confusing:

1. I have no idea why it rebuilds
2. I cannot turn this auto-rebuild off
3. I simply cannot stop it doing something without me asking it to do it

It is very dissatisfying and makes for bad user experience.

Please, please, give us an option to turn fast refresh off entirely.

It would also be very useful if it added a comment to the log entries in console about WHY exactly it rebuilt - was it because some file got changed (if so, which one?), or was it on a timer (if so, then how do we turn that timer off), etc.

These unpredictable page updates are killing developer experience entirely in some scenarios. Please can you do something about it. I can't understand how you dedicate so much resources on collaboration and super features like in V12, but still can't sort basic stuff like this out. Please could you pay attention to this issue - it is a serious deal-breaker.

[keaton-codes-tech]

I can't believe there is no option to turn this off. Really? I'm very close to just going back to Node and Vue. Developer experience with Next has been frustrating.

[mehzee92]

I can't believe there is no option to turn this off. Really? I'm very close to just going back to Node and Vue. Developer experience with Next has been frustrating.

same feeling.

[zallesov]

Same here. I struggle with next more than developing

[Schachte]

Same. Turning into corporate spaghetti

[MedDimessi]

I have the same issue, I was testing a login page with form and submit button, and to figure out any bugs or misbehavior, the page automatically reload and the console log clears up and I can't read what happened and what logs I've put to understand what's going on!!
It's not a solution as I am here looking for efficient one, but I put alert("the object or the log I am trying to display") and it stops the reload, and then I can be able to read the console history.
But it is still frustrating as the trying to control the lifecycle of the app after submitting is hard to debug because of the random reloading and clearing up the console.

[benkingcode]

Just enable Preserve console log in your DevTools?

[MedDimessi]

What about the app state that get cleared?? like I said, it's not a solution, just what I thought at the time to help me debug.

[ScyDev]

@dbbk That doesn't address the problem at all.

[murilozilli]

Changing the environment variable NODE_ENV='production' for me seems to fix it

[ScyDev]

But there's a reason for dev mode. Developers don't want to work in production mode.

[murilozilli]

I know, just informing of an alternative to at least get things going as apparently that was a blocker for some people

[ScyDev]

Same problem here. This doesn't look good at all for Next.js.

Same as @meglio, I just leave my Chrome and Firefox alone with the page open, and not changing any code files at all. Every N seconds, the page will do a full refresh with, saying on the console:

[Fast Refresh] rebuilding
next-dev.js?c2df:52 Refreshing page data due to server-side change

[MedDimessi]

Idk if we have the same issue exactly, but I solved mine by something that has nothing to do with nextjs fast refresh, I had a submit form, when submitting, the event that is linked to the submit button reloads the page. so, when I set e.preventDefault() before my logic and it worked like a charm.

[ScyDev]

Is it possible that this could perhaps be caused by the IDE or a Git client, that is changing some file in the app dir, causing Next Js to do a fast refresh because it listens to some file system signal?

Does anyone have a clue how we could get more info an WHICH file change exactly is triggering Next?

[ScyDev]

One small workaround I found that sometimes helps: pause JS execution in the dev tools of your browser. This way, at least you can look at the console log or DOM elements without Next refreshing on you for no good reason.

[pnede3]

Please make it possible to turn off periodic refreshing.

The app I'm working on for a customer isn't built as correctly as you expect, and the registration wizard is built on a single page. Whenever I'm in page 5 and the auto-refresh kicks in, it automatically goes back to slide 1.

[ycnmhd]

I had a similar issue where the UI would refresh when a call to an api route /api/some-route is made
In the CLI console I get this:

wait  - compiling /api/some-route (server only)...
event - compiled successfully in 1169 ms (1787 modules)

After a lot of frustration, I found that the issue happens on a page that uses getServerSideProps, from which I’m calling a function that is also used by /api/some-route.
By removing the import of that shared function, and calling /api/some-route directly within getServerSideProps using fetch, (which is not recommended in the documentation) the issue was solved.

[ScyDev]

Found the solution for my specific case by accident: There was a component that tried to act like a page (probably a dev did this out of ignorance).

It was passed lazyProps as one of its props, used them with useLazyProps() to track a state and used createLazyProps() to try and populate its initialProps.

All in all, this doesn't make sense to me and I have removed it all, using just a normal react state inside the component.
[Fast Refresh] still seems to happen and is printed on the console, but it doesn't cause a full reload of the page anymore, which was the annoying part.

[mrgreen33gamer]

still waiting...

[niraj-khatiwada]

I though I was the only one.

[mamift]

I couldn't see it referenced so far, but I found another github issue from Dec 2021 where one of the maintainers has indicated they will NOT allow turning off fast refresh/hot reload:
#13268 (comment)

We are not planning to allow turning off Fast Refresh as it's a critical part of Next.js that we strongly encourage using.

Yeah OK, it's helpful when it works, but when it doesn't? fast refresh has a bunch of limitations, that they themselves admit in their docs, but then rule out providing an option to toggle it or an escape hatch when it doesn't work properly or becomes a blocker/encumbrance to development?

And how is it critical? It's obviously off when deployed to production so how can it be 'critical' to have?? For crying out loud: React included in nextjs is critical - fast refresh is a dev aid that's nice to have but absolutely not critical in any common sense definition of the word.

Very disappointing that the maintainers have this arrogant attitude.

[DucDuong97]

still waiting...

[Aniumbott]

still waiting...

[DJanocha]

still waiting....
I can't put in words how frustrating this behaviour is...

EDIT:
looks like non-relevant. actually my settings triggered autosave. details in the next comment.

[DJanocha]

Maybe I'm not alone, but for me it happened that In the
Users/{username}/Library/Application Support/Code/User/settings.json (on mac os) I had this setting:

  "files.autoSave": "afterDelay"

which caused saving in the middle of declaring variables therefore I was seeing a lot of errors in my browser.
When I removed that line and saved the file the problem disappeared.

I'm not sure how this setting got there in the first place, but I saw that just today/yesterday.

For non-mac users:
Maybe just try to find "files.autoSave": "afterDelay" in the system (possibly in some settings.json file). Copilot told me that default locations for that file would be:

• for windows: C:\Users{username}\AppData\Roaming\Code\User\settings.json
• for linux: ~/.config/Code/User/settings.json

Copilot conversation for reference:

Hope that helps,
happy coding 😊

[gevgeny]

I solved it by patching next dev server code :( Dirty and fragile solution, but since we don't often reinstall the next module it is still better than nothing:

1. Go to node_modules/next/dist/client/components/react-dev-overlay/pages/hot-reloader-client.js
2. In the connect function, put the initialization under some condition, e.g localstorage flag:

...
if (localStorage.getItem('HMR_DISABLED')) {
    console.warn('HMR disabled');
} else {
    // old-code starts
    MODE = mode;
    (0, _client.register)();
    (0, _websocket.addMessageListener)((payload)=>{
        if (!("action" in payload)) {
            return;
        }
        try {
            processMessage(payload);
        } catch (err) {
            var _err_stack;
            console.warn("[HMR] Invalid message: " + payload + "\n" + ((_err_stack = err == null ? void 0 : err.stack) != null ? _err_stack : ""));
        }
    });
    // old-code ends
}
...

It works because this code is run on the client.
3. Remove the .next folder
4. rerun next dev
5. localStorage.setItem('HMR_DISABLED', true)

I did not find a way to pass env variable instead, something like HMR_DISABLED=true next dev would be much better. If somebody knows the way, please share.

[ScyDev]

Thank you!

[karldemetria]

Hello everyone, I encountered the same problem, and this is the solution that worked for me.

I isolated the issue by progressively deleting imports in my layout.tsx file until I reached the globals.css file. When I commented out the lines that included @tailwind base; @tailwind components; @tailwind utilities; the Fast Refresh issue suddenly disappeared. However, these Tailwind directives are very important to my app because the layout would be broken without them, so I needed to find a better solution.

I then examined my tailwind.config.js file. I isolated the issue by removing configurations one by one until I discovered that the problem originated from the content configuration line that included content: ['./src/**/*.{js,ts,jsx,tsx}'] Removing this line made the Fast Refresh issue disappear. Since my directory structure is src/app, I adjusted the content path by adding 'app' before 'src/', resulting in content: ['./src/app/**/*.{js,ts,jsx,tsx}'],

This change resolved the Fast Refresh issue without affecting my layout.

I hope this solution works for you all as well.

[JustCreateDeveloper]

You're a lifesaver

[sergey-getoffer]

I found that easiest way to turn off HMR is to block webpack-hmr url in DevTools. Hope this will help you

[ScyDev]

Hot damn! This is the way. Someone give this man a medal :)

[alfi-dim]

Sadly this not work for me :(

[codeaid]

My HMR suddenly started going crazy without me doing anything to any of the dependencies. It was all working fine for weeks and even this morning and then one moment I get this:

Screen.Recording.2024-09-09.at.19.42.45.mov

I've no idea how to fix it. Upgraded and downgraded Next.js. Deleted node_modules and reinstalled everything and even blocked the request using the suggested method above. Nothing helps and it just keep going.

[goksel-p]

I turn off the javascript in the tab:

cmd+shift+p in Chrome console > disable

[Dan503]

A decent makeshift solution. Essentially turn it off, save the file, then turn it back on again. The page will not hot-reload and you will still have access to the features that require JS.

[spiridonov-oa]

Has anyone solved this issue?

[tybro0103]

Took time to learn and try out Next.js today. First thing I wanted to do in my hello world app was disable HMR. Being straight-up SOL there is not a great first impression.

[victormanuelfrancodev]

I have a bit of a strange problem, and I'm exhausted from trying to fix it. It seems like it's related to this friend [Fast Refresh] rebuilding.
How can I disable this?!!

I've tried everything, forcing my page to reload every time I enter. Sometimes it works, other times it doesn't, etc. And it's not working. I don't know what to do, I don't know if Next.js is trash or if it's me."

Would you like to make this message more formal or add any specific details for a context where you might share it?