Module Federation with React Vite: React-Three-Fiber Canvas Not Loading, "Cannot read properties of undefined (reading 'current')" [closed]

I'm building a React Vite application for 3D modeling using react-three-fiber. I recently integrated a microfrontend (MFE) using the module federation plugin and shared React and other core packages between the host and remote apps. The rest of my application works fine, but the 3D canvas fails to render and throws this error:

Canvas: TypeError: Cannot read properties of undefined (reading 'current')

Here is my relevant vite.config.js sharing setup:

export default defineConfig({
    plugins: [
        react(),
        federation({
            name: "host_app",
            remotes: {
                chat_mfe: {
                    type: "var",
                    name: "chat_mfe",
                    entry: "<remoteentry url>",
                },
            },
            shared: {
                react: { singleton: true, requiredVersion: "^18.0.0" },
                "react-dom": { singleton: true, requiredVersion: "^18.0.0" },
                jotai: { singleton: true },
                "@tanstack/react-query": { singleton: true },
                "react-router-dom": { singleton: true },
                i18next: { singleton: true },
                "react-i18next": { singleton: true },
                "@react-three/fiber": { singleton: true, requiredVersion: "^8.9.1" },
                "three": { singleton: true, requiredVersion: "0.146.0" },
            },
        }),
    ]
});

• Both host and remote use the same versions of react, react-dom, @react-three/fiber, and three.

• The error only occurs when the microfrontend is loaded; the rest of the app works.

  What could be causing this error with refs in the 3D canvas when using module federation? How can I resolve it so the canvas renders correctly?

  Any help or pointers would be appreciated!