Open
Description
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
- Visit the Sandbox URL
- try editing the Component File
- the initial render is of a normal Component
- comment out the Normal component and uncomment the Memo wrapped component
- it does not render instead if you check the console you would see an error
- 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
Screen.Recording.2024-08-12.at.3.13.43.PM.mov
The expected behavior
React refresh should have work and the component should have rendered.