Closed brandongregoryscott closed 2 years ago
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
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.
Update to use react* v18 packages (
react
,react-dom
,react-is
andreact-test-renderer
).There's currently a console warning for apps that are running React 18 & using evergreen:
See this post for more info. I think the only place we're calling
ReactDOM.render
is theToaster
:https://github.com/segmentio/evergreen/blob/10e8e2399029a22526b55e3f532a0c0b81952696/src/toaster/src/Toaster.js#L14-L27
Discussed in https://github.com/segmentio/evergreen/discussions/1452