Bug: Fast Refresh crashed when wrapping function in memo.

[await-ovo]

As described in this issue: vercel/next.js#37241

React version: ^18

Steps To Reproduce

I can reproduce this issue in next.js, react-scripts and vite, here are the reproducible repositories:

• react-scripts: https://codesandbox.io/s/react-scripts-fast-refesh-yur9su?file=/src/Test.js
• Next.js: https://stackblitz.com/edit/nextjs-huqfxi?file=components%2FTest.jsx
• Vite: https://stackblitz.com/edit/vitejs-vite-d9y97z?file=src%2FTest.tsx

1. change component from function to React.memo:
   edit code in Test.jsx:

export function Test() {
  return <h1>hi test</h1>;
}

change it to:

export const Test = memo(function Test() {
  return <h1>test memo</h1>;
});

you can see the error in your browser console:

After manually refreshing the page and changing the code back to the original, there was no error, but the hot update did not work at all.

2. change component from function to React.forwardRef:

Same result as in step 1.

3. change component from React.memo to React.forwardRef:

change component Test from

export const Test = memo(function Test() {
  return <h1>test memo</h1>;
});

to

export const Test = forwardRef(function Test() {
  return <h1>forward ref</h1>;
});

Hot update has no effect, the page shows the result before modification.

Link to code example:

The current behavior

As described above.

fast-refresh-issue.mp4

The expected behavior

Fast Refresh works fine when changing component types.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!