bitovi / bitovi/react-to-web-component

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

Open
#142 3 comments 6 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
944
Forks
52
PR merge metrics
No merged PRs in 30d

Description

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 https://github.com/facebook/react/issues/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?

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.