Replies: 47 comments 27 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.
-
|
@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:
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. |
Beta Was this translation helpful? Give feedback.
-
|
I tried disabling it with the following in my 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: 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. |
Beta Was this translation helpful? Give feedback.
-
|
@meglio there is no "refresh every N seconds" as far as I'm aware |
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.
-
|
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 :/ |
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.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for responding @meglio . I specifically want to know, what you mean by
Do you mean this? - https://nextjs.org/docs/basic-features/fast-refresh#limitations |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, those libraries simply cannot satisfy all the requirements listed in that Fast Refresh article. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks again @meglio. I know people who love nextjs but it ain't working for my app so I ripped it out. |
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.
-
same feeling. |
Beta Was this translation helpful? Give feedback.
-
|
Same here. I struggle with next more than developing |
Beta Was this translation helpful? Give feedback.
-
|
Same. Turning into corporate spaghetti |
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.
-
|
Just enable |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
@dbbk That doesn't address the problem at all. |
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.
-
|
But there's a reason for dev mode. Developers don't want to work in production mode. |
Beta Was this translation helpful? Give feedback.
-
|
I know, just informing of an alternative to at least get things going as apparently that was a blocker for some people |
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.
-
|
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 |
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.
-
|
will you add this feature? I also need it |
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.
-
|
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.
-
|
Thank you! |
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.
-
|
You're a lifesaver |
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.
-
|
Hot damn! This is the way. Someone give this man a medal :) |
Beta Was this translation helpful? Give feedback.
-
|
Sadly this not work for me :( |
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.
and others
-
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