Replies: 50 comments 29 replies
-
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. |
Beta Was this translation helpful? Give feedback.
-
Have you looked into customising Next's webpack config? I expect you could find the fast refresh plugin/config in there and disable it. |
Beta Was this translation helpful? Give feedback.
-
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) |
Beta Was this translation helpful? Give feedback.
-
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:
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 👍 |
Beta Was this translation helpful? Give feedback.
-
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...
Are you referring to the Fast Refresh limitations? Thank you. |
Beta Was this translation helpful? Give feedback.
-
New
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. |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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!! |
Beta Was this translation helpful? Give feedback.
-
Changing the environment variable NODE_ENV='production' for me seems to fix it |
Beta Was this translation helpful? Give feedback.
-
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:
|
Beta Was this translation helpful? Give feedback.
-
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? |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
I had a similar issue where the UI would refresh when a call to an api route
After a lot of frustration, I found that the issue happens on a page that uses |
Beta Was this translation helpful? Give feedback.
-
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 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. |
Beta Was this translation helpful? Give feedback.
-
I though I was the only one. |
Beta Was this translation helpful? Give feedback.
-
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:
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. |
Beta Was this translation helpful? Give feedback.
-
still waiting... |
Beta Was this translation helpful? Give feedback.
-
still waiting... |
Beta Was this translation helpful? Give feedback.
-
still waiting.... EDIT: |
Beta Was this translation helpful? Give feedback.
-
Maybe I'm not alone, but for me it happened that In the
which caused saving in the middle of declaring variables therefore I was seeing a lot of errors in my browser. I'm not sure how this setting got there in the first place, but I saw that just today/yesterday. For non-mac users:
Copilot conversation for reference: Hope that helps, |
Beta Was this translation helpful? Give feedback.
-
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:
...
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. I did not find a way to pass env variable instead, something like |
Beta Was this translation helpful? Give feedback.
-
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 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 This change resolved the Fast Refresh issue without affecting my layout. I hope this solution works for you all as well. |
Beta Was this translation helpful? Give feedback.
-
I found that easiest way to turn off HMR is to block |
Beta Was this translation helpful? Give feedback.
-
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.movI've no idea how to fix it. Upgraded and downgraded Next.js. Deleted |
Beta Was this translation helpful? Give feedback.
-
I turn off the javascript in the tab:
|
Beta Was this translation helpful? Give feedback.
-
Has anyone solved this issue? |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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. 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? |
Beta Was this translation helpful? Give feedback.
-
I've noticed that every Server Action call triggers Fast Refresh, even when there are no code changes. This behavior leads to React rendering warnings in the console, specifically:
Expected behavior:
Current behavior:
Why does Next.js trigger Fast Refresh on Server Action calls when the code hasn't been modified? Is this intended behavior or a potential issue that needs to be addressed? |
Beta Was this translation helpful? Give feedback.
-
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.
Beta Was this translation helpful? Give feedback.
All reactions