Fast Refresh had to perform a full reload

[por14571-jochoa]

Verify canary release

• [X] 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

[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

[ghost]

In my case, the problem started to appear when I added an env variable called NEXT_PUBLIC_WEBSITE_NAME to the.env file. Then I accessed it in _app.tsx like this:

const WEBSITE_NAME = process.env.NEXT_PUBLIC_WEBSITE_NAME;

I guess the issue here is the NEXT_PUBLIC_ part of the env var name. To solve the problem I had to remove this problematic part in .env file, so that env var is now called WEBSITE_NAME. Then I "published" the var for the frontend in next.config.js:

const { WEBSITE_NAME } = process.env;
process.env.NEXT_PUBLIC_WEBSITE_NAME = WEBSITE_NAME;

const nextConfig = {
  //...
};

module.exports = nextConfig;

[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.

[yassersaidi]

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

solved the issue for me.

[DanPresa]

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

solved the issue for me.

Only is shown in the first time, then disappear