Estoy tratando de establecer el tipo de un componente personalizado, que se expone a través de la federación del módulo Webpack. La exposición y el uso funcionan bien, pero Typescript se queja del tipo de componente.
Tengo un módulo de "marco" que expone un componente de la Sidebar . Esto se usa dentro de mi módulo "Aplicación".
new ModuleFederationPlugin({ name: 'app', filename: 'remoteEntry.js', remotes: { frame: 'frame@http://localhost:3000/remoteEntry.js', }, import Sidebar from 'frame/Sidebar' //<- Cannot find module 'frame/Sidebar' or its corresponding type declarations. He intentado varias cosas para declarar el tipo dentro del módulo "Aplicación". Creé una carpeta @types dentro de mi carpeta src . Dentro de esto, he creado dos carpetas más "frame/Sidebar" y dentro hay un index.d.ts
import { VFC } from 'react' declare module 'frame/Sidebar' { const Sidebar: VFC export default Sidebar } Intenté mover el archivo a diferentes niveles dentro de la carpeta @types , lo renombré a frame.d.ts , probé una declaración diferente
declare module 'frame' { const Sidebar: VFC export { Sidebar } } Pero nada funciona. No sé, si mecanografiado incluso reconoce mi declaración, pero la documentación dice: "Por defecto, todos los paquetes ”@types” visibles están incluidos en su compilación". Entonces, de alguna manera, mi declaración es incorrecta.
¿Alguien puede ayudarme a declarar correctamente el tipo de este componente?
He encontrado mi problema. Parece que imports deberían enumerarse dentro del declare module y no antes. Types , por otro lado, se pueden definir fuera. Esta es la notación correcta dentro del archivo src/@types/frame/Sidebar/index.d.ts :
type SidebarProps = { ... } declare module 'frame/Sidebar' { import { VFC } from 'react' const Sidebar: VFC<SidebarProps> export default Sidebar }