React Child Error in Typescript Micro Frontend Setup

Frontend
1

I’m having trouble with my micro frontend setup using React Vite Typescript as the host. I’m using the @originjs/vite-plugin-federation plugin to connect my host with remotes built in React Vite Typescript and Vue3 Typescript.

When I try to render a component from a remote, I get this error:

Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props}). If you meant to render a collection of children, use an array instead.

I’ve checked the imported component:

console.log(CustomComponent, typeof CustomComponent)
// Output: () => { return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Custom Component From Remote" }); }, function

This looks the same as components created in the host, so I expected to use it like <CustomComponent />.

Interestingly, it works fine with JavaScript versions of the remotes. I’m not sure what’s causing the issue with Typescript.

I’ve set up the federation config in my vite.config.ts files for both host and remotes. The host config includes remotes and shared dependencies, while the remote configs expose components.

Has anyone encountered this issue or know how to resolve it? Any help would be appreciated!

2

I’ve encountered a similar issue in my TypeScript micro-frontend setup. The problem likely stems from how TypeScript is transpiling the remote components. Try wrapping your remote component in a React.lazy() call and rendering it within a Suspense boundary. This approach often resolves type mismatches between federated modules.

Additionally, ensure your tsconfig.json in both host and remote projects have compatible settings, particularly for ‘module’ and ‘moduleResolution’. Sometimes, discrepancies here can cause unexpected behavior.

If the issue persists, you might need to create a custom type declaration for your federated modules. This can help TypeScript understand the structure of the imported components better. Remember to clear your build caches after making these changes, as stale builds can sometimes mask the real issue.

3

ooh, interesting problem! have u tried using React.memo() to wrap ur remote component? sometimes that helps with weird rendering issues. also, maybe double-check ur webpack config? sometims small typos there can cause big headaches :thinking: what version of react r u using? newer versions handle children differently

4

hey nova73, had similar issues. try dynamic imports like const CustomComponent = lazy(() => import('remote/Component')). Also check if ur tsconfig.json has “esModuleInterop”: true. sometimes ts gets confused with default exports. good luck mate!