Refresh after HMR results in hydration error when runtime is set to experimental-edge

chipit24 commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Wed Aug 10 14:25:27 PDT 2022; root:xnu-8020.141.5~2/RELEASE_X86_64
Binaries:
  Node: 16.16.0
  npm: 8.11.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 12.3.2-canary.17
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome 105.0.5195.125

How are you deploying your application? (if relevant)

N/A

Describe the Bug

After fast refresh (or HMR 🤷) kicks in and updates my app, refreshing the page manually results in a react hydration error.

Expected Behavior

I don't expect any error after a page refresh.

Link to reproduction

https://github.com/chipit24/hmr-bug-nextjs

To Reproduce

To reproduce this bug, all you have to do is enable the expirimental edge runtime via the Next.js config:

next.config.js:

/** @type {import("next").NextConfig} */
module.exports = {
  reactStrictMode: true,
  experimental: {
    runtime: 'experimental-edge',
  },
}

With that enabled, run the app with npm run dev, open up your browser at localhost:3000 and confirm the app loads. Now in your IDE, make any change to the page (in the repo above, make any change to what gets returned in the Home component at pages/index.tsx). It doesn't matter what you change, as long as HMR (or fast refresh) gets triggered.

You'll see the changes in the page, but when you refresh the page manually (e.g. by pressing ⌘+R on a Mac), you'll be met with the following error:

The first error reads:

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Call Stack

``` checkForUnmatchedText node_modules/react-dom/cjs/react-dom.development.js (9647:0) diffHydratedProperties node_modules/react-dom/cjs/react-dom.development.js (10310:0) hydrateInstance node_modules/react-dom/cjs/react-dom.development.js (11306:0) prepareToHydrateHostInstance node_modules/react-dom/cjs/react-dom.development.js (12564:0) completeWork node_modules/react-dom/cjs/react-dom.development.js (22181:0) completeUnitOfWork node_modules/react-dom/cjs/react-dom.development.js (26596:0) performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js (26568:0) workLoopSync node_modules/react-dom/cjs/react-dom.development.js (26466:0) renderRootSync node_modules/react-dom/cjs/react-dom.development.js (26434:0) performConcurrentWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js (25738:0) workLoop node_modules/scheduler/cjs/scheduler.development.js (266:0) flushWork node_modules/scheduler/cjs/scheduler.development.js (239:0) MessagePort.performWorkUntilDeadline node_modules/scheduler/cjs/scheduler.development.js (533:0) ```

The second error reads:

Unhandled Runtime Error
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Call Stack

``` updateHostRoot node_modules/react-dom/cjs/react-dom.development.js (19849:0) beginWork node_modules/react-dom/cjs/react-dom.development.js (21615:0) beginWork$1 node_modules/react-dom/cjs/react-dom.development.js (27426:0) performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js (26557:0) workLoopSync node_modules/react-dom/cjs/react-dom.development.js (26466:0) renderRootSync node_modules/react-dom/cjs/react-dom.development.js (26434:0) recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js (25850:0) performConcurrentWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js (25750:0) workLoop node_modules/scheduler/cjs/scheduler.development.js (266:0) flushWork node_modules/scheduler/cjs/scheduler.development.js (239:0) MessagePort.performWorkUntilDeadline node_modules/scheduler/cjs/scheduler.development.js (533:0) ```

balazsorban44 commented 1 year ago

Looks like this was introduced in v12.2.6-canary.5, most likely via #39910, I am having a look.

Immortalin commented 1 year ago

@balazsorban44 any progress on this? I am still getting on 13.4.8 with Chakra UI and export const runtime = 'edge' enabled on all pages

damian-balas commented 11 months ago

@balazsorban44 I have the same issue, but I don't use EDGE. After I change <p> text from abc to abcd and refresh the page, I get the error.

next: 13.5.4

vercel / next.js