search

single-spa / single-spa-react

Single-spa lifecycles helper for React applications
https://single-spa.js.org/docs/ecosystem-react.html
MIT License
226 stars 63 forks source link

Get "Cannot create property '_updatedFibers' on number '0'" when using React 18 #175

Closed robcalcroft closed 12 months ago

robcalcroft commented 1 year ago

I get a fatal error when upgrading my apps to React 18 and using single spa react 5 with React 18 support. Any idea whats happening here? I've tried also just rendering a simple app of <div>Hello</div> and I get the same issue so I don't think its to do my app setup. I tried with another app and it does the same thing. React: 18.2 (development) ReactDOM: 18.2 (development) single-spa-react: 5.0.0 (not using 5.1.0 as it looks like its broken atm) Error:

Uncaught TypeError: application '@apps/my-app' died in status SKIP_BECAUSE_BROKEN: Cannot create property '_updatedFibers' on number '0'
    at vy (react-dom.development.js:25427:22)
    at Qb (react-dom.development.js:28825:16)
    at ww.render.bw.render (react-dom.development.js:29324:5)
    at i.elementToRender (single-spa-react.js:1:5030)
    at single-spa-react.js:1:5125
    at new Promise (<anonymous>)
    at s (single-spa-react.js:1:3895)
    at lifecycle.helpers.js:28:29

Lifecycle setup:

const lifecycles = singleSpaReact({
  React,
  ReactDOMClient,
  rootComponent: App,
  errorBoundary(err: Error) {
    return <div>There was an error {err.message}</div>;
  }
});
gjhommersom commented 1 year ago

Any update on this issue? I'm currently also in the process of upgrading to React 18 and have run into the same issue.

React: 18.2.0 ReactDom: 18.2.0 SingleSpaReact: 5.2.0

gjhommersom commented 1 year ago

I've investigated this a bit more and it seems to be caused by depending on both React17 and React18 in the same microfrontend. This can happen when you have an external that also depends on react but uses a different version.

Something like this:

Update: I resolved it by not including both versions of React in my import file and just updating to React18. When running with the development version of React the following error will be printed but everything works fine.

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

After that you can update each microfrontend individually to React18 and everything keeps working. Just make sure to also update the entry file to match https://single-spa.js.org/docs/ecosystem-react/#quickstart.

MilanKovacic commented 1 year ago

Did you solve the issue?

MilanKovacic commented 12 months ago

Closing due to inactivity. Feel free to reopen the issue if the problem still occurs.

Tiberriver256 commented 11 months ago

If the solution provided by @gjhommersom doesn't work out and you actually do need to run React 17 and React 18 side by side. You'll want to re-bundle react-dom as a utility module with the externals re-pointing react to the correct version you want to use.

I wrote up a detailed walkthrough and made a repo for reference.