Including a library, that builds on React, in a remote results into "Cannot read properties of null (reading 'useRef')"

[pganster]

Versions

• vite-plugin-federation: 1.3.2
• vite: 4.0.5

Reproduction

Essentially I just cloned your react-vite example and added the react-image-gallery library in the remote app. When opening the remote app directly, the gallery is shown as expected. BUT if you open the host app, you will get the error Cannot read properties of null (reading 'useRef').

Steps to reproduce

1. Clone this reproduction repository.
2. In root, call pnpm install && pnpm run build && pnpm run serve
3. Open localhost:5000
4. See the error

When opening localhost:5001, the error does not occur.

What is Expected?

No error to occur when opening the host app.

What is actually happening?

The error Cannot read properties of null (reading 'useRef') occurring and breaking the host and remote app.

[bluedusk]

Here's an issue raised before, its not being fixed

#294

[vinodloha]

Any solution to this issue, I am facing exact above error when remote is loading AG-Grid.

[adirzoari]

same issue, any solution? @bluedusk @vinodloha @pganster

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

same issue, any solution? @bluedusk @vinodloha @pganster

[colerss]

Same issue. I have configuration object on my remote which is used to pass on 2 views with their routing data. React is designated as shared in both configs.

View 1 has nested components, useState and useEffect in itself, but no react hooks within the nested components. Renders without issue.
View 2 also has nested components, but these components do use react hooks. It crashes without fault.

For whatever reason, once we go down a level in the component tree of the remote, it just stops being able of finding React, essentially rendering this entire plugin unusable for most complex applications. Given that this issue seems to have been around for over 2 years now with neither a reliable workaround or an update from the developers. I am giving up faith that this will ever be fixed and will explore alternative solutions.

[tecnest-fx4]

same issue, any solution?

[VladimirTambovtsev]

Same issue. I have configuration object on my remote which is used to pass on 2 views with their routing data. React is designated as shared in both configs.

View 1 has nested components, useState and useEffect in itself, but no react hooks within the nested components. Renders without issue. View 2 also has nested components, but these components do use react hooks. It crashes without fault.

For whatever reason, once we go down a level in the component tree of the remote, it just stops being able of finding React, essentially rendering this entire plugin unusable for most complex applications. Given that this issue seems to have been around for over 2 years now with neither a reliable workaround or an update from the developers. I am giving up faith that this will ever be fixed and will explore alternative solutions.

@colerss did you find any alternative for vite for microfrontends? I have the same issue.

[FalcoO0n]

Same issue. I have configuration object on my remote which is used to pass on 2 views with their routing data. React is designated as shared in both configs.

View 1 has nested components, useState and useEffect in itself, but no react hooks within the nested components. Renders without issue. View 2 also has nested components, but these components do use react hooks. It crashes without fault.

For whatever reason, once we go down a level in the component tree of the remote, it just stops being able of finding React, essentially rendering this entire plugin unusable for most complex applications. Given that this issue seems to have been around for over 2 years now with neither a reliable workaround or an update from the developers. I am giving up faith that this will ever be fixed and will explore alternative solutions.

@colerss am facing exactly same issue, the app am building is complex, was using shadcn, it works fine on remote but on host it gives error : Cannot read properties of null (reading 'useRef'). Have you found any solution or alternative?

[boligolov]

Unfortunately, same issue :(

[dvlptuankiendo]

me facing same issue, with react-apexcharts in remote app
any update guys?

[TacticCoder]

Same here

[TacticCoder]

Ok, an update after some investigating: if you are using a modern bundle of your library, it seems the federation plugin can't handle it.

So, for instance, my solution for react-simple-keyboard is to import the modern index bundle of the component and boom the problem solved, seems that if the federation plugin has a dependency with some legacy JS browser support it can be generate problems