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

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