Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incompatibility with React 18: ReactDOM.render is no longer supported in React 18 #479

Closed
BjoernKW opened this issue Jun 15, 2022 · 1 comment

Comments

@BjoernKW
Copy link

BjoernKW commented Jun 15, 2022

When trying to use react-singleton-hook with React 18 this error message comes up in the browser console:

react_devtools_backend.js:4026 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

overrideMethod @ react_devtools_backend.js:4026
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
render @ react-dom.development.js:29572
mount @ env.js:14
addHook @ SingletonHooksContainer.js:59
(anonymous) @ singletonHook.js:44
commitHookEffectListMount @ react-dom.development.js:23049
commitPassiveMountOnFiber @ react-dom.development.js:24816
commitPassiveMountEffects_complete @ react-dom.development.js:24781
commitPassiveMountEffects_begin @ react-dom.development.js:24768
commitPassiveMountEffects @ react-dom.development.js:24756
flushPassiveEffectsImpl @ react-dom.development.js:26990
flushPassiveEffects @ react-dom.development.js:26935
performSyncWorkOnRoot @ react-dom.development.js:26032
flushSyncCallbacks @ react-dom.development.js:12009
commitRootImpl @ react-dom.development.js:26910
commitRoot @ react-dom.development.js:26638
finishConcurrentRender @ react-dom.development.js:25937
performConcurrentWorkOnRoot @ react-dom.development.js:25765
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

This is caused by this code segment in https://github.com/Light-Keeper/react-singleton-hook/blob/main/src/utils/env.js, specifically the render() call:

// ...

import { unstable_batchedUpdates, render } from 'react-dom';

// ...
export const mount = C => {
  if (globalObject.document && globalObject.document.createElement) {
    render(<C/>, globalObject.document.createElement('div'));
  } else {
    // ...
  }
};
@vadikoom
Copy link
Owner

vadikoom commented Aug 8, 2022

Hi @BjoernKW, thansk for reporintg this. Version 4.0.0 fixes the issue.

Fixed in the scope of #489

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants