search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.48k stars 26.8k forks source link

Fast refresh doesn't work with top level await #35537

Open yume-chan opened 2 years ago

yume-chan commented 2 years ago

Verify canary release

Provide environment information

npx next info

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:54 PST 2021; root:xnu-8019.61.5~1/RELEASE_X86_64
Binaries:
  Node: 16.13.1
  npm: 8.1.2
  Yarn: 1.22.17
  pnpm: 6.30.0
Relevant packages:
  next: 12.1.1-canary.17
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

Microsoft Edge 99.0.1150.46 (Official build) (x86_64)

How are you deploying your application? (if relevant)

next dev

Describe the Bug

When Top Level Await is enabled in next.config.js, and some page uses Top Level Await, React Fast Refresh stops working and full refresh is always performed.

In real world scenarios, a page file may import some other module that uses Top Level Await. The result is same.

Expected Behavior

React Fast Refresh continues to work.

To Reproduce

  1. Clone https://github.com/yume-chan/next-repro-35537
  2. npm i
  3. npm run dev
  4. Open page in browser, enter anything in the input box
  5. Edit Home component in pages/index.js, verify Fast Refresh works because input box retains its value
  6. Stop npm run dev, uncomment config.experiments.topLevelAwait = true; in next.config.js and await Promise.resolve(); in pages/index.js
  7. Repeat 3~5, verify that Fast Refresh doesn't work now because either the Full Refresh warning popup shows or input box lost its value.
MartinSchere commented 1 year ago

+1 This is broken for us too.