[BUG] ReactDOM.render is no longer supported in React 18.

[JoshWhite]

Describe the bug Using a templated Person component from React Wrapper, I get the following warning in the browser console:

react_devtools_backend.js:2655 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:2655
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
render @ react-dom.development.js:29670
handleTemplateRendered @ Mgt.ts:104
fireCustomEvent @ baseComponent.ts:195
renderTemplate @ templatedComponent.ts:137
renderDetails @ mgt-person.ts:887
render @ mgt-person.ts:579
update @ lit-element.ts:300
update @ templatedComponent.ts:80
performUpdate @ updating-element.ts:775
_enqueueUpdate @ updating-element.ts:725
await in _enqueueUpdate (async)
requestUpdateInternal @ updating-element.ts:690
initialize @ updating-element.ts:531
initialize @ lit-element.ts:224
UpdatingElement @ updating-element.ts:516
LitElement @ lit-element.ts:101
MgtBaseComponent @ baseComponent.ts:113
MgtTemplatedComponent @ templatedComponent.ts:64
MgtPerson2 @ mgt-person.ts:538
createElement @ react-dom.development.js:9784
createInstance @ react-dom.development.js:10941
completeWork @ react-dom.development.js:22187
completeUnitOfWork @ react-dom.development.js:26596
performUnitOfWork @ react-dom.development.js:26568
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

As an example:

const Person = (props: PersonProps) => {
  return (
    <MGTPerson {...props} className={styles.person}>
      <Template template="line1" />
    </MGTPerson>
  );
};

const Template = (props: MgtTemplateProps) => {
  const { t } = useTranslation();
  const { person } = props.dataContext;
  return (
    <span className="capitalize">
      {t("hi")} {person.displayName.split(" ")[0]}
    </span>
  );
};

To Reproduce Steps to reproduce the behavior:

1. Create a React app & npm install the mgt-react package
2. Render a <Person /> component with using templates (see above)
3. Run the app in chrome

Expected behavior The package to be updated as the warning suggests: https://reactjs.org/link/switch-to-createroot

Environment (please complete the following information):

• OS: Windows
• Browser: Chrome
• Framework: React
• Context: Person component -> mgt-react
• Version: @microsoft/mgt-react: ^2.9.0 | react: "^18.2.0",

Additional context If I remove the template element of this, the warning goes away. Could be affecting all templates?

[ghost]

Hello JoshWhite, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[gavinbarron]

We don't yet support React 18.

Unfortunately due to our need to be compatible with SharePoint Framework this might take quite a while to support React 18 or need us to have separate libraries

https://github.com/SharePoint/sp-dev-docs/issues/7864

[JoshWhite]

Ok, thanks for the info.

Is it worth adding the latest version of React you support to the peerDependencies?

[gavinbarron]

That's a great suggestion, thank you!

[NathZ1]

+1 for this. I just spent the last 6hours upgrading an app to use CRA5 and React 18 and now am getting a bunch of warnings from MGT saying "ReactDOM.render is no longer supported in React 18." There was no peer dependency warnings when upgrading. Looks like it only affects components that are templated (of which I have many). Stuck between a rock and hard place now...

[gavinbarron]

The change to have a peer dependency of React 17 has been reverted due to #2386

Upon investigation it was found that the error in the browser console when using templated components is a deprecation warning and does not stop functionality from working. And in fact the warning is not present in production builds,

We are looking at making the peer dependency 17 || 18 in our v3 release.

[gavinbarron]

@JoshWhite and @NathZ1 if you have scenarios where the use of ReactDOM.render in the mgt-react package is actually breaking things I'd appreciate you sharing them so that we can work through the specific issues as we roll out v3