Estoy tratando de desarrollar una aplicación simple con dos componentes diferentes. El principal usa React.lazy para obtener el otro componente y lo envuelve dentro de un elemento React.Suspense . Pero hay un error súper extraño en este ejemplo simple y una solución de pirateo más anormal.

El error es: Expression produce un tipo de unión que es demasiado complejo para representar

El código fuente está debajo. Y también creé un repositorio en el que puedes repetir fácilmente el error tú mismo.

Contenido de App.tsx

 import React from "react" import ReactDom from "react-dom" const Fr = React.lazy( () => import('./Fragment') ); // Uncomment this line below, then it compiles without any errors // const dummy = <Fr /> const Main = () => ( <div> <React.Suspense fallback={"Loading"}> <div> <Fr/> {/* Error: Expression produces a union type that is too complex to represent */} </div> </React.Suspense> </div> ) // @ts-ignore ReactDom.render(<Main/>, document.body);

Como puede ver, App.tsx importa ./Fragment con React.lazy . Y cuando se usa el componente Fr, mecanografiado arroja el error.

Contenido de Fragment.tsx

 import * as React from "react" const Fragment = () => ( <div> Fragment </div> ) export default Fragment

Al usar Typescript 4.1.2, funciona sin ningún error, pero en 4.5.2 no lo es.

Solución extraña

Cuando quita el comentario de la asignación ficticia const dummy = <Fr /> , funciona sin ningún problema.

Ahora me pregunto cuál es el problema real aquí y por qué la tarea ficticia lo resuelve.