chore: Upgrade React 15 to React 18#173
Merged
Merged
Conversation
- react-tiny-virtual-list was declared but never imported, and its peer dep (react 15.x || 16.x) blocks npm install with React 18 - bootstrap script still referenced lerna; use npm install --legacy-peer-deps
With both root and playground on React 18, npm workspaces hoists React to root node_modules/. The hardcoded path.join(__dirname, 'node_modules/react') no longer exists. Use require.resolve like the other aliases so it finds React wherever npm installed it.
createRoot.render() is async in React 18 unlike React 15's ReactDOM.render. The show() method needs the PopoverBubble ref immediately after render to set content and attach event listeners. Wrap in flushSync to guarantee the ref callback fires synchronously.
The custom Popover had positioning bugs and missing arrows after the React 18 upgrade. Replace it with @floating-ui/react which handles positioning, flip/shift, arrow rendering, and click/hover/dismiss interactions out of the box. This also eliminates the manual createRoot portal and ContextProvider workaround since FloatingPortal preserves React context natively.
…irst render this.value was only set in componentDidMount (after first render), so the initial render always displayed "undefined". For plain objects without the inspected symbol, componentDidMount never called setState, leaving the stale undefined visible until a user click triggered a re-render.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Upgrades the React dependency from v15 to v18 across the entire devtools frontend and playground apps.
Changes
Package versions
reactandreact-domfrom^15.7.0to^18.2.0in rootpackage.jsonreact-test-rendererfrom^15.7.0to^18.2.0react-addons-test-utils(React 15 only, not compatible with React 18)reactandreact-domfrom^16.13.1to^18.2.0inpackages/playground/package.jsonReactDOM.render to createRoot migration
src/frontend/index.jsx— migrated tocreateRoot/root.render()/root.unmount()src/frontend/Popover.jsx— migrated internal portal rendering tocreateRootbaltimore,baltimore-hooks,casablanca,denmark,todo-6,todo-local-6) — migrated tocreateRootDeprecated lifecycle methods (10 occurrences across 6 files)
componentWillMountmoved toconstructororcomponentDidMountin:DataItem.jsx,RichPanel.jsx,App.jsx,ContextMenu.jsx,injectStores.jsxcomponentWillReceivePropsreplaced withcomponentDidUpdatein:DataItem.jsx,ContextMenu.jsxcomponentWillUpdatereplaced withcomponentDidUpdatein:RichPanel.jsx,Popover.jsx,injectStores.jsxReactDOM.findDOMNode removal (3 occurrences in 2 files)
src/frontend/PreviewValue.jsx— replacedfindDOMNode(this)withReact.createRef()on root elementssrc/frontend/Popover.jsx— replacedfindDOMNode(this)with atriggerRefand wrapper<span style={{display:'contents'}}>to avoid layout impact