-
Notifications
You must be signed in to change notification settings - Fork 27.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Disable Fast Refresh #13268
Comments
Please provide reproducible code and we can figure out why Fast Refresh isn't working as intended. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Some libraries have bugs which cause things to not work well with fast refresh. Here's a reproducible example of xstate's And issue on xstate's repo: statelyai/xstate#995 |
I would also like to see the option available to not use fast refresh, its a blocker for me using 9.4 |
@idlefingers I'd argue it's a good thing that Fast Refresh is exposing bugs in libraries, and is not grounds to disable it in Next.js. @njbarrett could you explain why? You didn't provide any reproduction or reason. |
@Timer yeah, for sure. Makes it a pain to develop with in the meantime though. |
ditto, this should be configurable |
Closing as no reproduction has been provided. Happy to fix any bugs users find and can provide a demo for. |
Do you have a guide for package authors on how to ensure that state works correctly with next's implementation of Fast Refresh? Would any advice from React Native's implementation also work in Next, or are there nuances that authors should know about? |
The impl and nuances are identical to that of React Native. |
@Timer Today, I stumbled upon another example of library incompatibility with the new Fast Refresh implementation. You can see a reproduction example here: https://codesandbox.io/s/hardcore-sara-ueu2k Looks fine on first load, but doesn't call the input callback anymore after refresh. After initial loadAfter [Fast Refresh] done |
Hi @nfantone , @Timer I mean, the following code wouldn't work properly:
In the example above, we change ref to the truth inside useEffect cleanup function (which is handy to prevent unnecessary timers, callbacks, etc). I've fixed it, by publishing a new version: Here is an example of such fixes, I hope it could be helpful: xnimorz/use-debounce@2ac1732 |
Thank you for the issue and the example! Also, I've fixed the example by updating the version of use-debounce: https://codesandbox.io/s/hungry-architecture-4z46m?file=/pages/index.js (so that it works now) |
#12753 is an example where it'd be useful to disable fast refresh |
It'd be great if we could disable this. I want to use the new NextJs, but I don't want to go through all my components and add names to my anonymous functions ... |
@Lwdthe1 You can run this codemod to update your codebase: https://github.com/vercel/next-codemod#name-default-component |
Yes, is there any update for this? Using Fast Refresh with IE11 can sometime be beneficial to be able to disable it; as Fast Refresh can make IE11 unresponsive is my experience. |
Here's an issue I found using Pullstate (https://lostpebble.github.io/pullstate/). On fast-refresh the store will not update so the input value will not change. Repro: import Head from 'next/head'
import { Store } from 'pullstate';
import { useCallback, useState } from 'react'
const store = new Store({
value: 'hello'
});
export default function Home() {
const value = store.useState(s => s.value);
const updateValue = useCallback((v) => {
store.update(s => {
s.value = v;
});
}, [store]);
return (
<div className="container">
<input type="text" value={value} onChange={e => updateValue(e.target.value)} />
</div>
)
} |
Hey folks, sorry to hear that Fast Refresh has been occasionally frustrating. I don't think we've seen any case of the Fast Refresh logic itself being broken in React, but it's definitely true not all libraries are 100% compatible with its constraints today. However, it so happens that the constraints of Fast Refresh are similar (and slightly stricter) than the existing StrictMode, so getting StrictMode-compatible is a good first step anyway! (For example, Another important note is that some of the upcoming React features will take advantage of the same set of constraints. So it's not just about "fixing a library for Fast Refresh" but also about making it compatible with powerful features like built-in animation support which we may add in the following couple of years. We have documented Fast Refresh constraints here and there's another detailed explanation here. I understand the frustration of having to adjust your code to work within these constraints, but it makes your library more resilient overall, and creates a lot of benefit in the long run. |
@Timer Would this repo help? https://github.com/osequi/test-xstate/releases/tag/0.1.0 Thanks a lot! |
As a workaround, you can disable Fast Refresh for a single file by adding a non-React export, e.g.: export const thisIsAnUnusedExport = "this export only exists to disable fast refresh for this file";
export function MyComponent() {
// ...
} You'll have to add this to every file where you want a full reload to happen on change. This matches the warning that NextJS will show in the browser console (emphasis added):
(It seems that you don't actually have to import that exported value, you only have to export it.) Thank you to @gaearon for the context, which helps a lot in understanding the reasoning for this in React. Regarding NextJS, I'd like to add two use cases where having this functionality natively in NextJS would be useful to developers, and I'm curious if there are other workarounds for these situations:
|
Dear team, 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. |
I just invested a week building a project with Next just to discover and track down a subtle bug caused by the constraints of Fast Fresh and I'm quite beside myself learning there's just straight up no way to disable it so I can move on. |
In my experience, Fast Refresh has been insanely bad. Every time I change the littlest thing, I have to waste at least 10 seconds while my webpage jumps all over the place. Sometimes it just doesn't stop and the only way to fix it is Ctrl+Shift+R. The correct way to go about this would be to research my problem and possibly post a bug report, but I don't have the time or resources to do that and providing a way to disable Fast Refresh would solve my problems instantly. Right now the only viable solution is switching to Gatsby. I tested this on Linux, on a fresh next.js install with no additional yarn packages on both Chromium (92.0.4515.131, no plugins) and Firefox (90.0.2, no plugins), so I'm almost entirely sure this doesn't stem from a weird configuration issue that I have. |
Dear Next.js team, could you please react to our concerns described in detail above? |
I've decided to just reload manually (with ⌘L ⏎). I tried Chrome's request blocking, but my settings wouldn't persist, so I decided to use a simple node proxy instead.
|
I've been trying to set the following on webpack :
By following: https://webpack.js.org/guides/hot-module-replacement/ and trying it this way https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config But it didn't change anything for me. My guess that the setting gets an override somewhere when booting Next or it is ignored. |
It doesn't work because Next.js doesn't use Webpack Dev Server |
I was able to achieve this by blocking any hmr refresh requests from the browser networking tab. |
So, why is this issue closed? It's unsolved and no official response exists. |
Could we get an update on whether or not there is a plan to turn fast refresh off? Personally I just find it annoying and would like my app only to rebuild when I explicitly save the file after editing. |
@kesupile We are not planning to allow turning off Fast Refresh as it's a critical part of Next.js that we strongly encourage using. We'd also like to fix issues where Fast Refresh isn't working as you'd expect.
This is how it should work by default – if it isn't, please open a bug with a reproduction and we can take a look 🙏 |
How can I revert back to the old (9.3 ) HMR in 9.4? Is there any config parameter?
It looks like fast refresh does not work very well with third party design systems like e.g. baseweb
The text was updated successfully, but these errors were encountered: