Fast Refresh had to perform a full reload

[por14571-jochoa]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

What browser are you using? (if relevant)

Google Chrome 102.0.5005.115

How are you deploying your application? (if relevant)

next run dev

Describe the Bug

When data is sent to the service and a context that handles the entire application is updated, the system does not change the page but reloads itself, deleting everything in the provider (react)

Expected Behavior

I hope you go to the next screen which is indicated by the router.push(urlRelative, url)

Link to reproduction

/None

To Reproduce

Is project in development

_NEXT-1355

[rtpa25]

facing the same issue when with apollo client

[dalalRohit]

yeah, I am facing the same issue. While doing client-side navigation, the page gets fully refreshed automatically.

[RyousukeUchino]

I don't know if this is a similar issue, but sometimes the same error would occur.

When this occurred, I deleted the .next directory and did yarn dev again and this error did not occur anymore.

[dalmasonto]

Same error occurs just by having routing in my next js app, help solve

[dalmasonto]

The error was caused by exporting a react component in lowercase ie const index = () => {return <></>}
Renaming to const Index = () => {return <></>} solved it.

[DanPresa]

The error was caused by exporting a react component in lowercase ie const index = () => {return <></>} Renaming to const Index = () => {return <></>} solved it.

I don't think this solve the issue because the issue starts when you run yarn/npm run dev

[ethyaan]

Hi,
Fresh install of the nextjs is giving me the same error

I have no idea what is this

[dalmasonto]

Hi, Fresh install of the nextjs is giving me the same error

I have no idea what is this

Have you changed anything in the code?

[dalmasonto]

Hi, Fresh install of the nextjs is giving me the same error

I have no idea what is this

If you are using typescript for your project, remember to set your pages to use either .tsx or .ts. Also, if a page is returning nothing or the page is returning a function which is not a react component the error could rise

[ethyaan]

Hi, Well, extensions are tsx, and also, it's a valid React component. And, as I mentioned, it's a fresh install without any modification, so you can install it and see for yourself how it behaves. I couldn't understand why or what this was for. The error is not explicative.

[Youssef-Durgham]

same error here.

[DanPresa]

Hi, Fresh install of the nextjs is giving me the same error
I have no idea what is this

If you are using typescript for your project, remember to set your pages to use either .tsx or .ts. Also, if a page is returning nothing or the page is returning a function which is not a react component the error could rise

typescript has nothing to do, because when you create a project without typescript throws the same error

[ethyaan]

I really tried to figure this out but couldn't find anything and now I just tried,
you don't believe me it works and i didn't touch a thing;
always weird things in js/ts world

[DanPresa]

I really tried to figure this out but couldn't find anything and now I just tried, you don't believe me it works and i didn't touch a thing; always weird things in js/ts world

If it is the first time you are running it it's normal.
Shut down the cli and try to run it once again.

[dalmasonto]

Hello, guys, just found out what is happening with such an install, it is not a bug, it is something critical in next js, and for my take it is appearing on v13, I guess this is a new check. I have done some more explanation here https://youtu.be/TtUW8rUH3Vc
The full reload updates your UI with what your server has incase you have an open tab pointing to port 3000 when you run your app

[dalmasonto]

This explains why the current version of next js has to reload the browser incase you have the localhost:3000 already open

[ethyaan]

OK @DanPresa , Thank you I tried and you are right and now I understand.
The conclusion is.
1- This is not a bug, it's just a unhandled behavior while you have the project open from previous running instance.
2- does it cause critical error? No.
3- Is there a fix? Yes, I found a simple solution and I'll try to send the PR for this and have it fix.
Keep you guys updated here.

[ethyaan]

I've created the PR.
Since the full reload is not meaningful at the first time, I just disabled it to ignore the logs and event propagation for the first time.
any idea, comment, suggestion is appreciated.

[medmin]

Hello, guys, just found out what is happening with such an install, it is not a bug, it is something critical in next js, and for my take it is appearing on v13, I guess this is a new check. I have done some more explanation here https://youtu.be/QF1vPoDY9kg The full reload updates your UI with what your server has incase you have an open tab pointing to port 3000 when you run your app

I can confirm that there is no warning in console/terminal if there is no open page like "localhost:3000".

[berkaycirak]

If your function name is lowercase just try to change it to uppercase. This has worked for me
ex:
function index(){...} -----> function Index(){...}

[DanPresa]

If your function name is lowercase just try to change it to uppercase. This has worked for me ex: function index(){...} -----> function Index(){...}

Unfortunaltely it doesn't work. I tried it also

[zaytsevandrii]

The same problem after installing the application and running

[MartinSchere]

Same issue for us:

warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
Error: Aborted because ./src/components/views/HomeView/index.tsx is not accepted
Update propagation: ./src/components/views/HomeView/index.tsx -> ./src/pages/index.tsx -> ./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=%2FUsers%2Fmschere%2FCode%2Fjpgstore%2Ffrontend%2Fsrc%2Fpages%2Findex.tsx&page=%2F!
    at applyHandler (http://localhost:3000/_next/static/chunks/webpack.js?ts=1671113382190:1054:31)
    at http://localhost:3000/_next/static/chunks/webpack.js?ts=1671113382190:700:21
    at Array.map (<anonymous>)

[dan-breu]

In my case, I was able to see the error in the chrome debug console. I changed it and it worked for me.

[jayantur13]

Commenting to confirm.
Just updated to newest version, previously using 12.3.1. The stated issue exists in version 13.x.x and isn't solved yet in the latest one.

[admmasters]

This is occurring while running tests in our CI system (Jenkins). Not sure why, would be super helpful to be able to log out a reason why its triggering a reload as obviously the source code isn't changing.

[2022-12-28T12:13:01.737Z] ·[WebServer] warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

[2022-12-28T12:13:05.212Z] ·[WebServer] warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

[2022-12-28T12:13:06.160Z] [WebServer] warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

[2022-12-28T12:13:06.734Z] [WebServer] warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

[2022-12-28T12:13:07.679Z] [WebServer] warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

[2022-12-28T12:13:08.246Z] [WebServer] warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

[2022-12-28T12:13:09.292Z] [WebServer] warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

[2022-12-28T12:13:09.878Z] [WebServer] warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

[2022-12-28T12:13:10.823Z] [WebServer] warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

[2022-12-28T12:13:11.400Z] [WebServer] warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

[2022-12-28T12:13:12.345Z] [WebServer] warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

[2022-12-28T12:13:12.917Z] [WebServer] warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

[2022-12-28T12:13:13.916Z] [WebServer] warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

[2022-12-28T12:13:14.488Z] [WebServer] warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works

[phatify]

same issue =)) it seems this warning only show if your app bundle size large. I tried optimize my code and stop using third party library (e.g: ui components) and I not see that warning.

[allestaire]

We patched a small fix into 13.4.9 that will reduces some unexpected cases of full reload. Please upgrade and let us know if it helps on your case 🙏

How do I upgrade?

Just run npm install next@13.4.9

[pranav2844]

Still doesn't work sadly

[pranav2844]

Another thing. I am having an Invalid copilot token: missing token error 403 and GitHub Copilot could not connect to server error. This first happened the same day the fast refresh first occurred. Coincidence?

[allestaire]

next@13.4.9 seems blazingly fast!!!! Cheers!!

[allestaire]

Still doesn't work sadly

What do you mean not working? what are you trying to reach by the way? 😄

[pranav2844]

Still doesn't work sadly

What do you mean not working? what are you trying to reach by the way? 😄

For the past week or so, on my regular laptop, I've been getting this issue along with a TypeError: Failed to fetch at __webpack_require on the repo I am using for my internship. I've tried recloning the repo, deleting next and node_modules directory, stopping all Proxies, checking my internet, cleaning my browser and DNS cache, and even reinstalling VSCode. I also went to BestBuy and A+ Computers, but they couldn't do anything. I even asked 2 fellow CS friends of mine, and they never experienced something like this. I am using another laptop atm, and that's been working well. Do you have any idea what could be going on?

I did multiple times. Nothing worked

[allestaire]

king w

hhhmm, I dont really know what will be the cause,
It might be the version of node, like NextJS only supports node js 18 and above

[pranav2844]

I reinstalled Node to the recent version on npm.orgSent from my Verizon, Samsung Galaxy smartphoneGet Outlook for Android

[allestaire]

The errors seems a bit weird,

[pranav2844]

You're telling me.Sent from my Verizon, Samsung Galaxy smartphoneGet Outlook for AndroidFrom: allestaire ***@***.***>Sent: Friday, July 14, 2023 1:47:55 AMTo: vercel/next.js ***@***.***>Cc: pranav2844 ***@***.***>; Mention ***@***.***>Subject: Re: [vercel/next.js] Fast Refresh had to perform a full reload (Issue #40184) The errors seems a bit weird, —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[dalmasonto]

@pranav2844 you are also seeming weird infact, why can't you be clear because we have given you a number of solutions,

• upgrade node and npm version
• delete your node modules and reinstall them
• clear your next js app cache and rerun your app
• upgrade next js version

They all seem not working which is weird since one of the above has always to work in weird situations, that means you are either doint it wrong totally or doing something which is not in the docs.

To help you in the best possible way, share the entire screenshot of it failing, so that we can read through the errors ourselves since you are sharing the same sought of error message whenever one asks. Kindly share the screenshot and also a screenshot of your directory structure too.

[dalmasonto]

Still doesn't work sadly

What do you mean not working? what are you trying to reach by the way? smile

I also have no idea, let him share the error instead not the message

[pranav2844]

[allestaire]

Thats a warning, but on my part, that causes infinite reloads on my end, which is not good,
You must check if there are asynchronous component that is imported or used

[Mood-al]

I updated my version from next 13.4.6 to 13.4.12 because there were some issues with SWR package

and this problem started to appear in my project i don't understand why this is happening since in 13.4.6 version it was working just fine!!
I tried to downgrade to 13.4.9 version and the same problem was there!

[Mood-al]

I think i figured out why the problem is happening in my case! since i'm using the page router and using api routes with it, and in those api routes i'm exporting a nameless function so when i tried to name it the problem gone and in Next 13 they named them like so
export default async function handler(req, res) {}

[leikoilja]

Same issue only on chrome (even with all plugins disabled).

• firefox works file
• chrome in incognito works wine

my walk-around solution:
phew, after long time of fighting with the issue, thanks to @dycw what helped is to change next js dev server to run on port 3010. Weird magic but it helped.

[Humed-Muhammad]

Updating nextjs package to 13.4.19 (latest version) solved the problem for me

[jessedelira]

Hello, guys, just found out what is happening with such an install, it is not a bug, it is something critical in next js, and for my take it is appearing on v13, I guess this is a new check. I have done some more explanation here https://youtu.be/QF1vPoDY9kg The full reload updates your UI with what your server has incase you have an open tab pointing to port 3000 when you run your app

This was the reason for me, thank you so much!

[bhavesh-chaudhari]

Issue got fixed when I upgraded from next@13.4.9 to latest

[MinSeok0901]

13.5.3에서도 여전히 발생합니다.

✓ Ready in 2.4s
⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
✓ Compiled / in 765ms (351 modules)

[jessedelira]

13.5.3에서도 여전히 발생합니다.

✓ Ready in 2.4s

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

✓ Compiled / in 765ms (351 modules)

Did you have a window open with localhost:port when the application is running locally?

[sentience]

Because this specific warning has several possible causes (most of which are documented at the URL cited in the message), this issue thread is a tangle, with different people trading experiences of and solutions for completely different root-causes of this message. I suggest this issue be closed in favour of more scenario-specific issues (in other words, please report with a reproducible test case).

For what it's worth, in our project we are only seeing this message when we stop and then restart the dev server, with the app actively displayed in an open browser. Here are the reproduction steps:

1. next dev
2. Open the app in Chrome.
3. Back in your Terminal, Ctrl-C to stop the dev server. The browser loses its Web Sockets connection to the dev server.
4. next dev again to launch a new instance of the dev server.
5. The page already open in the browser re-establishes its connection to the dev server, but tries and fails to load a now-obsolete “hot-update” manifest URL (e.g. http://localhost:3000/_next/static/webpack/7934fb62ffa750b9.webpack.hot-update.json). As a fallback, the app (correctly) performs a full reload.
6. The dev server prints the warning: "Fast Refresh had to perform a full reload."

I believe it is normal for Fast Refresh not to be able to live-update the page that was originally loaded from a different running instance of the dev server, and for it to fall back to a full reload. That this produces a warning in the dev server console is not unreasonable, but is perhaps more confusing than useful.

The real issue here seems to be that the information provided at the documentation URL cited in the message is misleading, since it does not mention this potential cause: that an open browser displaying the app generated by a previous instance of the dev server cannot Fast Reload from a newly-launched dev server.

If the maintainers would accept the contribution, I'm happy to open a PR against that documentation page to add this potential cause to the list.

[lveillard]

Because this specific warning has several possible causes (most of which are documented at the URL cited in the message), this issue thread is a tangle, with different people trading experiences of and solutions for completely different root-causes of this message. I suggest this issue be closed in favour of more scenario-specific issues (in other words, please report with a reproducible test case).

For what it's worth, in our project we are only seeing this message when we stop and then restart the dev server, with the app actively displayed in an open browser. Here are the reproduction steps:

1. next dev
2. Open the app in Chrome.
3. Back in your Terminal, Ctrl-C to stop the dev server. The browser loses its Web Sockets connection to the dev server.
4. next dev again to launch a new instance of the dev server.
5. The page already open in the browser re-establishes its connection to the dev server, but tries and fails to load a now-obsolete “hot-update” manifest URL (e.g. http://localhost:3000/_next/static/webpack/7934fb62ffa750b9.webpack.hot-update.json). As a fallback, the app (correctly) performs a full reload.
6. The dev server prints the warning: "Fast Refresh had to perform a full reload."

I believe it is normal for Fast Refresh not to be able to live-update the page that was originally loaded from a different running instance of the dev server, and for it to fall back to a full reload. That this produces a warning in the dev server console is not unreasonable, but is perhaps more confusing than useful.

The real issue here seems to be that the information provided at the documentation URL cited in the message is misleading, since it does not mention this potential cause: that an open browser displaying the app generated by a previous instance of the dev server cannot Fast Reload from a newly-launched dev server.

If the maintainers would accept the contribution, I'm happy to open a PR against that documentation page to add this potential cause to the list.

I would add that even better than having nice docs explaining all the 10 causes for this error, would be to catch which one of triggers is fired and inform about it.

Obviously "hey, you are exporting one component in camelCase in this file in this line" is easier to fix than "hey, one of these 4 issues exist somewhere in your codebase"

[moarief]

Because this specific warning has several possible causes (most of which are documented at the URL cited in the message), this issue thread is a tangle, with different people trading experiences of and solutions for completely different root-causes of this message. I suggest this issue be closed in favour of more scenario-specific issues (in other words, please report with a reproducible test case).
For what it's worth, in our project we are only seeing this message when we stop and then restart the dev server, with the app actively displayed in an open browser. Here are the reproduction steps:

1. next dev
2. Open the app in Chrome.
3. Back in your Terminal, Ctrl-C to stop the dev server. The browser loses its Web Sockets connection to the dev server.
4. next dev again to launch a new instance of the dev server.
5. The page already open in the browser re-establishes its connection to the dev server, but tries and fails to load a now-obsolete “hot-update” manifest URL (e.g. http://localhost:3000/_next/static/webpack/7934fb62ffa750b9.webpack.hot-update.json). As a fallback, the app (correctly) performs a full reload.
6. The dev server prints the warning: "Fast Refresh had to perform a full reload."

I believe it is normal for Fast Refresh not to be able to live-update the page that was originally loaded from a different running instance of the dev server, and for it to fall back to a full reload. That this produces a warning in the dev server console is not unreasonable, but is perhaps more confusing than useful.
The real issue here seems to be that the information provided at the documentation URL cited in the message is misleading, since it does not mention this potential cause: that an open browser displaying the app generated by a previous instance of the dev server cannot Fast Reload from a newly-launched dev server.
If the maintainers would accept the contribution, I'm happy to open a PR against that documentation page to add this potential cause to the list.

I would add that even better than having nice docs explaining all the 10 causes for this error, would be to catch which one of triggers is fired and inform about it.

Obviously "hey, you are exporting one component in camelCase in this file in this line" is easier to fix than "hey, one of these 4 issues exist somewhere in your codebase"

Using the ESLint React reccommended plugin or just the single rule would prevent this from happening: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md

But I agree, more information would be beneficial in this case as I have the same problem, checked all files and removed other exports from a react component file... so don't see the issue, unless it might be the .scss files for me?

Or might be because I am using a proxy?..

[ricardo-fnd]

I get this message when I rewrite from an app using app folder to a app using pages folder, and in this last case, it enters in a loop. You can get more info here #59580

[samcx]

Hi everyone!

I will be moving this issue to our Discussions, to echo what was suggested here.

We encourage folks to file bugs outside of this thread detailing the exact issue, with a and details for how to consistently reproduce the issue! Tracking each of these Fast Refresh issues separately will make it easier for us to efficiently (and less noisy) triage.

Happy 2024!