React 18 support

[brandongregoryscott]

Update to use react* v18 packages (react, react-dom, react-is and react-test-renderer).

There's currently a console warning for apps that are running React 18 & using evergreen:

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

See this post for more info. I think the only place we're calling ReactDOM.render is the Toaster:

https://github.com/segmentio/evergreen/blob/10e8e2399029a22526b55e3f532a0c0b81952696/src/toaster/src/Toaster.js#L14-L27

Discussed in https://github.com/segmentio/evergreen/discussions/1452

^{Originally posted by **AhmedBenGayess** April 21, 2022} Hello and thank you for your work 😄 Is support for React 18 coming soon or should I stick with react 17?

[brandongregoryscott]

I think we're going to have to skip out on the createRoot changes until we are able to require React v18 by default, which I would consider a breaking change/major version bump - createRoot isn't exported from react-dom/client in v16/v17. (see https://github.com/facebook/react/commit/17806594cc28284fe195f918e8d77de3516848ec)

Error: Cannot find module 'react-dom/client'
Require stack:
- /Users/brandon.scott/app/node_modules/evergreen-ui/commonjs/toaster/src/Toaster.js
- /Users/brandon.scott/app/node_modules/evergreen-ui/commonjs/toaster/src/index.js
- /Users/brandon.scott/app/node_modules/evergreen-ui/commonjs/toaster/index.js
- /Users/brandon.scott/app/node_modules/evergreen-ui/commonjs/table/src/TableCell.js
- /Users/brandon.scott/app/node_modules/evergreen-ui/commonjs/table/src/TextTableCell.js
- /Users/brandon.scott/app/node_modules/evergreen-ui/commonjs/select-menu/src/Option.js
- /Users/brandon.scott/app/node_modules/evergreen-ui/commonjs/autocomplete/src/AutocompleteItem.js
- /Users/brandon.scott/app/node_modules/evergreen-ui/commonjs/autocomplete/src/Autocomplete.js
- /Users/brandon.scott/app/node_modules/evergreen-ui/commonjs/autocomplete/index.js
- /Users/brandon.scott/app/node_modules/evergreen-ui/commonjs/index.js
- /Users/brandon.scott/app/webpack/css-variable-map.js
- /Users/brandon.scott/app/webpack/webpack.config.js
- /Users/brandon.scott/app/node_modules/webpack-cli/bin/utils/convert-argv.js
- /Users/brandon.scott/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js

[brandongregoryscott]

Looks like npm v8 has changed the way peer dependencies resolve (it now throws an error instead of a warning)

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: react-18-evergreen-test@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from evergreen-ui@6.9.12
npm ERR! node_modules/evergreen-ui
npm ERR!   evergreen-ui@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/brandon.scott/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/brandon.scott/.npm/_logs/2022-06-21T13_59_22_854Z-debug.log

➜  react-18-evergreen-test git:(master) node --version && npm --version
v16.13.2
8.1.2

whereas in npm v6, it would still install the package but provide a warning:

npm WARN evergreen-ui@6.9.12 requires a peer of react-dom@^16.8.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ui-box@5.0.1 requires a peer of react@^16.0.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself.

➜  react-18-evergreen-test git:(master) ✗ npm --version
6.14.15
➜  react-18-evergreen-test git:(master) ✗ node --version
v14.18.2

It can be force installed, but this feels like a workaround/pitfall as more users begin to adopt React 18. I'll look at getting the React 18 PR merged soon.