React 18 support - today logs a bunch of warnings for ReactDom.render being deprecated

[sync-by-unito]

Current Behavior

Thought we had an issue for React-18 support but couldn't find one. ReactDOM.render is deprecated and logs a bunch of warnings

┆Issue is synchronized with this Jira Bug by Unito
┆Attachments: Screen Shot 2022-04-21 at 12.43.59 PM.png
┆author: Zach Williams
┆epic: CT Architecture
┆friendlyId: UNIFY-1639
┆priority: Medium
┆sprint: Backlog
┆taskType: Bug

[lmiller1990]

I spend a lot of time on this. #22334 is pretty close. The problem is in React 18, you need to do

import ReactDOM from 'react-dom/client'

ReactDOM.createRoot(...)

In React 17 and below, this isn't an option.

One idea I had was a dynamic import:

if (isUsingReact18) {
  
  return import('react-dom/client')
    .then((mod) => {
      const root = mod.default.createRoot(el)
      root.render(reactComponent)
        return wrapAndRender()
    })
} else {
  // React 17 path...
}

This would be fine in regular ESM - but both Webpack and Vite do some optimizations and look through the code and find the conditional import, and error (even if the path isn't actually executed). This is very annoying.

I wrote a Vite plugin to ignore this import if the React version is 17...

https://github.com/cypress-io/cypress/pull/22334/files#diff-16d5c3539d8c7886c9e32c7205f516f22157e638f9688dccf4126f4bfcee4434R17-R30

Works great!

I cannot figure out how to do the same for Webpack, though. The error doesn't actually block development, it's just a big ugly. We could proxy console.error potentially and hide it (not ideal) or write a Webpack plugin to make a "fake" react-dom/client, which is proving very hard.

This is the only blocker on React 18.