Tengo una aplicación que está escrita en Typescript y usa Webpack con el complemento ts-loader para empaquetar la aplicación y servirla mientras se ejecuta en modo de desarrollo.

Estoy tratando de escribir un componente en un archivo que está envuelto en React.forwardRef antes de exportarlo. Puedo crear un componente que funcione con React.forwardRef , pero tan pronto como lo exporto, aparece un error que dice que el valor no está definido. Recibo este error independientemente de si realmente importo el componente en otro archivo o si lo uso en el archivo en el que está definido.

 // 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

El error que veo cuando intento exportar el componente

 Uncaught ReferenceError: ForwardedComponent is not defined

¿Alguna idea de lo que podría estar pasando aquí?

Versiones utilizadas:

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