I get `Uncaught TypeError: can't access property "validated", oldElement._store is undefined` with React 19 and module federation with vite

[peshoicov]

The Problem

I have a React app, build with React 19 and vite, which uses some SVG icons, and we load them via svgr. The app works and builds fine.

However - when I use it as a micro-frontend with the module federation approach - I get this error in the browser console. on the host app:

Uncaught TypeError: can't access property "validated", oldElement._store is undefined

Debugging

I narrowed down the issues by stripping pieces of code little by little, and in the end - when I don't load SVG icons via svgr - then it works fine.
If I switch to wrapping the SVG code into a React FC and avoid svgr plugin - then the issue is gone.

Resolution

I ended up switching back to React 18, and all works fine now, using svgr plugin. The remote app works standalone and also as a micro-frontend.
Still - I decided to open the issue in case someone else stumbles upon this.

[Tim1111]

This might be unrelated.
I had a similar issue, due to react in the microfrontend remote running in production mode and react in the host running in dev mode.
Adding NODE_ENV=development in the remote build command helped

[paralin]

I have the same issue, bundling react with esbuild and the rest of the app with vite and rollup. I wonder if this is a bug in react itself? One that only happens when react and the components are loaded at different times. I had NODE_ENV=production set in the environment, maybe that matters?

[paralin]

Oh! Maybe it is when NODE_ENV does not match between the react build and the components build! That makes the most sense.