Fast Refresh does not work @latest

[kasperaamodt]

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_ARM64_T8101
Binaries:
  Node: 17.5.0
  npm: 8.4.1
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.1.2
  react: 18.0.0
  react-dom: 18.0.0

warn - Latest canary version not detected, detected: "12.1.2", newest: "12.1.3-canary.0".
Please try the latest canary version (npm install next@canary) to confirm the issue still exists before creating a new issue.
Read more - https://nextjs.org/docs/messages/opening-an-issue

What browser are you using? (if relevant)

Chrome 99.0.4844.83 (Official Build) (arm64)

How are you deploying your application? (if relevant)

No response

Describe the Bug

Just installed a new project with npx create-next-app@latest, and fast refresh is not working.

Expected Behavior

For the browser to refresh when I save a change in my code editor.

To Reproduce

npx create-next-app@latest

start project with npm run dev

[kasperaamodt]

Updated to Chrome Version 100.0.4896.60 (Official Build) (arm64), still same issue.

[kasperaamodt]

Correction on my ticket. It appears the fast refresh is working, it's just taking a long time for it to actually reload. I measured it to about 4 seconds.

[ghocevar]

I have the same problem only that Fast Refresh doesn't work at all. Apparently React v18 breaks it, as it works with the latest version of React v17 (tried with Next.js v12.1.3-canary and v12.1.1).

[gleno]

I think the original title said it best. Mine is completely broken for changes made in the code, and works fine for changes made in stylesheets. Also brand new app, tried both with --typescript flag and without.

[lordkerwin]

I have the same issue, kind of.
Brand new nextjs app, with/without typescript, created using npx create-next-app@latest and i can see in the terminal that it's reloading.

event - compiled client and server successfully in 107 ms (142 modules)

and in the browser (chrome, firefox and brave) I see the little vercel loader in the bottom right for a fraction of a second... however, the page doesn't refresh.

Like i said, brand new next app, and all i have changed is the word Welcome to Hello and i have to actually go and F5 or refresh the page to see changes.

Forgot to mention, latest LTS node, running on Pop!_OS.

[kasperaamodt]

I found out that I had a component that made my website refresh every 4 seconds, so when I removed that component, the fast refresh does not work at all.

[CarlosLevir]

Same thing here.

[bryanbarrios]

Same problem here. I'm using the latest version on an ARM.

[djxy]

For those who have this issue. You need to downgrade the react version to 17.0.2 for react and react-dom.

The latest React version changed in the last day, from 17.0.2 to 18.0.0.

[caestrada]

@djxy that was it!

[diegohaz]

Fast Refresh also stopped working for me. The page only gets updated when I interact with an element with an internal state (and the state changes).

[timneutkens]

Figured out the problem and opened a PR here: #35718 We'll get it out today 🙏

[timneutkens]

Released in 12.1.3

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.