Bug: React refresh fails when component type is changed to memo or forward ref and vice versa

[Biki-das]

when Editing a JSX component, if we try to move from a normal React component to a memo Wrapped component, or to a forwardRef wrapped, we cannot see any component rendered, but rather an error Uncaught TypeError: Component is not a function

this seems to be an issue with React refresh since if we try to reload the page, the component renders fine without any issue.

if we start with a code like below

import { forwardRef, memo } from "react";

export function Component() {
   return <h1>This is a component</h1>;
}

and then edit it to

export const Component = memo(function Test() {
  return <h1>This is a memo component</h1>;
});

the error comes up

React version: 18.2.0

Steps To Reproduce

CodesandBoxLink

1. Visit the Sandbox URL
2. try editing the Component File
3. the initial render is of a normal Component
4. comment out the Normal component and uncomment the Memo wrapped component
5. it does not render instead if you check the console you would see an error
6. try commenting the Memo out and then check the ForwardRef, the same thing happens

Link to code example: CodesandBoxLink

if the codeSandBox is not able to reproduce the same due to some reason, try cloning the below repository https://github.com/Biki-das/ReactRefreshBug

The current behavior

https://github.com/user-attachments/assets/4e691ebf-38d1-4c05-9585-c5292aab5563

The expected behavior

React refresh should have work and the component should have rendered.

[Biki-das]

cc @eps1lon @hoxyq

[cayasso]

I am having this exact same issue, will test the PR suggested.

[github-actions[bot]]

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[bot]]

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!

[Biki-das]

Few observation with NextJs seems like only when rendering on client side this issue happens, on using the "use client" directive i see the same issue.

[gaearon]

I reverted the fix but see https://github.com/facebook/react/pull/32214#issuecomment-2734436781 on the latest.