I have an application that is written in Typescript, and uses Webpack with the ts-loader plugin to pack the application and serve it whilst running in dev mode.

I am trying to write a component in one file that is wrapped in React.forwardRef before being exported. I can create a component that works with React.forwardRef, but as soon as I export it I get an error saying that the value is undefined. I get this error regardless of whether I actually import the component in another file, or use it in the file it is defined in.

// This works fine
const Component = (props: any, ref: any) => <div ref={ref}>hello</div>
const ForwardedComponent = forwardRef(Component)

// This doesn't work:
const Component = (props: any, ref: any) => <div ref={ref}>hello</div>
export const ForwardedComponent = forwardRef(Component)

// Somehow this works!
const Component = (props: any, ref: any) => <div ref={ref}>hello</div>
const ForwardedComponent = forwardRef(Component)
export const ReExportedComponent = ForwardedComponent

The error I see when I try and export the component

Uncaught ReferenceError: ForwardedComponent is not defined

Any ideas what could be going on here?

Versions used:

"react": "^17.0.2",
"webpack": "^5.0.0",
"typescript": "^4.2.4",
"ts-loader": "8.3.0",