Warning generated by shared React libs for host app and r2wc components.

[bmomberger-bitovi]

I am building multiple Web components using r2wc and a Vite build which strips out dependencies on react, react-dom/client, and react/jsx-runtime.

I am further consuming those Web components in a Next.js app which puts React, ReactDOM, and React.JSXRuntime on the window/global for use by both the host app and the imported Web components. This occurs in a custom _app.jsx

when I cause updates to the page in dev mode, i get one or more console warnings like the following:

client.js:1 Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.
    at MyApp (webpack-internal:///./pages/_app.jsx:20:11)
    at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:80:11)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:306:63)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:858:919)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:78:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:182:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:372:11)

I am not experiencing any unusual behavior of the page or its components, only that this warning is generated.

When using a "full" Vite build of the web components instead, where each Web component brings its own copy of the React dependencies, this warning is not generated.

This may be a false warning according to facebook/react#25675 . A comment at the bottom of that issue says that using setTimeout may not be sufficient to avoid this warning without causing other problems.

If root.unmount() in https://github.com/bitovi/react-to-web-component/blob/f3670fa/packages/react-to-web-component/src/react-to-web-component.ts#L39 may lead to an actual race condition instead of the one warned about, perhaps a microtask may avoid both?

[pstachula-dev]

I had a similar problem.

You should wrap each component in a div:

<div>
  <div><component-foo /></div>
  <div><component-bar /></div>
</div>

[maxzz]

The problem still exists after packaging custom elements into div. I'm using custom elements inside a react-spring transition (repo). There were no problems with React 17.

[maxzz]

See React error with child React Web Components #114