[DevTools Bug] Element "9" not found | Also "Element "10" not found" / "Element "12" not found"...
Problem
Website or app https://github.com/arbocobra/redux-minesweeper Repro steps On first load I get multiple Error warnings on all app components from `<Game/>` down. They are identified with different Element numbers but appear to be directed to the same issue "The error was thrown at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:39558:15" If you select 'Begin Game' in app the error in component` <Game />` can be dismissed but new Errors appear on all newly rendered components below (once again all have different Element numbers directed to the same location (../main.js:39558:15) // This is issue is probably related to [[DevTools Bug] Element "41" not found](https://github.com/facebook/react/issues/25755) Chrome is up to date (Version 108.0.5359.71 (Official Build) (x86_64)), and restarted. I also tried reinstalling React extension (running 4.27.0). The app is using Redux, which one commenter in other thread mentioned might be a commonality. How often does this bug happen? Every time DevTools package (automated) react-devtools-extensions DevTools version (automated) 4.27.0-bd2ad89a4 Error message (automated) Element "9" not found Error call stack (automated) [code block] Error component stack (automated) [code block] GitHub query string (automated) [code block]
Error Output
Error warnings on all app components from `<Game/>` down. They are identified with different Element numbers but appear to be directed to the same issue
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix React DevTools Element Not Found Errors
The errors 'Element "X" not found' are likely caused by a mismatch between the React component tree and the React DevTools' internal representation of that tree. This can occur when components are dynamically rendered or unmounted in a way that DevTools does not track correctly, especially when using Redux for state management.
Awaiting Verification
Be the first to verify this fix
- 1
Update React and React DevTools
Ensure that you are using the latest stable versions of React and React DevTools to benefit from bug fixes and improvements.
bashnpm install react@latest react-dom@latest - 2
Check Redux Store Configuration
Review the Redux store setup to ensure that the state is being managed correctly and that components are subscribing to the correct slices of state. Improper configuration can lead to rendering issues.
javascriptconst store = createStore(rootReducer, applyMiddleware(thunk)); - 3
Wrap Components with React.memo
Consider wrapping components that are frequently re-rendered with React.memo to prevent unnecessary renders and help DevTools track the component tree more effectively.
javascriptconst MyComponent = React.memo((props) => { /* component code */ }); - 4
Inspect Component Lifecycle
Add console logs in component lifecycle methods (e.g., componentDidMount, componentWillUnmount) to ensure that components are mounting and unmounting as expected without causing race conditions.
javascriptcomponentDidMount() { console.log('Component mounted'); } - 5
Clear DevTools Cache
Clear the cache of the React DevTools extension to ensure that it is not holding onto stale data that could cause these errors.
bashRight-click on the React DevTools icon > 'Manage Extensions' > 'Clear data'
Validation
To confirm the fix, reload the application and check the console for any remaining 'Element not found' errors. Ensure that all components render without errors after performing the steps above. Additionally, monitor the Redux state changes to ensure components are responding correctly.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep