react-hot-loader: index.js:2178 React-hot-loader: reconciliation failed could not dive into * while some elements are still present in the tree.
Description
I am getting following error for a nested component even parent has a key.
index.js:2178 React-hot-loader: reconciliation failed could not dive into [ Jul 20, 2018 5:01 pm ] while some elements are still present in the tree.
__stack_frame_overlay_proxy_console__ @ index.js:2178
error @ react-hot-loader.development.js:166
(anonymous) @ react-hot-loader.development.js:1266
hotReplacementRender @ react-hot-loader.development.js:1246
next @ react-hot-loader.development.js:1259
(anonymous) @ react-hot-loader.development.js:1308
hotReplacementRender @ react-hot-loader.development.js:1246
next @ react-hot-loader.development.js:1259
(anonymous) @ react-hot-loader.development.js:1308
hotReplacementRender @ react-hot-loader.development.js:1246
next @ react-hot-loader.development.js:1259
(anonymous) @ react-hot-loader.development.js:1323
hotReplacementRender @ react-hot-loader.development.js:1246
next @ react-hot-loader.development.js:1259
(anonymous) @ react-hot-loader.development.js:1308
hotReplacementRender @ react-hot-loader.development.js:1246
next @ react-hot-loader.development.js:1259
(anonymous) @ react-hot-loader.development.js:1323
hotReplacementRender @ react-hot-loader.development.js:1246
next @ react-hot-loader.development.js:1259
(anonymous) @ react-hot-loader.development.js:1323
hotReplacementRender @ react-hot-loader.development.js:1246
next @ react-hot-loader.development.js:1259
(anonymous) @ react-hot-loader.development.js:1308
hotReplacementRender @ react-hot-loader.development.js:1246
next @ react-hot-loader.development.js:1259
(anonymous) @ react-hot-loader.development.js:1308
hotReplacementRender @ react-hot-loader.development.js:1246
next @ react-hot-loader.development.js:1259
(anonymous) @ react-hot-loader.development.js:1323
hotReplacementRender @ react-hot-loader.development.js:1246
next @ react-hot-loader.development.js:1259
(anonymous) @ react-hot-loader.development.js:1308
hotReplacementRender @ react-hot-loader.development.js:1246
next @ react-hot-loader.development.js:1259
(anonymous) @ react-hot-loader.development.js:1323
hotReplacementRender @ react-hot-loader.development.js:1246
next @ react-hot-loader.development.js:1259
(anonymous) @ react-hot-loader.development.js:1323
hotReplacementRender @ react-hot-loader.development.js:1246
hotReplacementRender$1 @ react-hot-loader.development.js:1350
reconcileHotReplacement @ react-hot-loader.development.js:1359
renderReconciler @ react-hot-loader.development.js:1373
asyncReconciledRender @ react-hot-loader.development.js:1381
proxiedRender @ react-hot-loader.development.js:615
finishClassComponent @ react-dom.development.js:13085
updateClassComponent @ react-dom.development.js:13047
beginWork @ react-dom.development.js:13715
performUnitOfWork @ react-dom.development.js:15741
workLoop @ react-dom.development.js:15780
renderRoot @ react-dom.development.js:15820
performWorkOnRoot @ react-dom.development.js:16437
performWork @ react-dom.development.js:16358
performSyncWork @ react-dom.development.js:16330
requestWork @ react-dom.development.js:16230
scheduleWork$1 @ react-dom.development.js:16096
enqueueForceUpdate @ react-dom.development.js:11222
./node_modules/react/cjs/react.development.js.Component.forceUpdate @ react.development.js:291
(anonymous) @ react-hot-loader.development.js:1542
(anonymous) @ react-hot-loader.development.js:1541
setTimeout (async)
updateInstances @ react-hot-loader.development.js:1535
(anonymous) @ react-hot-loader.development.js:1557
hotSetStatus @ bootstrap 087c43a6c05b06efecf4:202
hotApply @ bootstrap 087c43a6c05b06efecf4:551
(anonymous) @ bootstrap 087c43a6c05b06efecf4:289
Promise.then (async)
hotUpdateDownloaded @ bootstrap 087c43a6c05b06efecf4:288
hotAddUpdateChunk @ bootstrap 087c43a6c05b06efecf4:265
webpackHotUpdateCallback @ bootstrap 087c43a6c05b06efecf4:7
(anonymous) @ 0.087c43a6c05b06efecf4.hot-update.js:1
Expected behavior
I think whole parent component should be rendered.
Actual behavior
Doesn’t re-render component
Environment
React Hot Loader version:
Run these commands in the project folder and fill in their results:
node -v: v10.7.0npm -v: 6.2.0
Then, specify:
- Operating system: MacOS 10.13.6
- Browser and version: Chrome Version 67.0.3396.99 (Official Build) (64-bit)
Reproducible Demo
Please take the time to create a new project that reproduces the issue.
Here is my code, hot-loader is failing on lines 43-49, where CommentAuthor and CommentTime components are being rendered within a map (Console output: https://monosnap.com/file/BWtpuOYQBtULWpRf5qQnPRcg18K30h#embed)
About this issue
- Original URL
- State: open
- Created 6 years ago
- Reactions: 13
- Comments: 21 (1 by maintainers)
I’m getting this error since I’ve upgraded to Styled Components V4.
@probablyup - 🥇 💯 🙌 React.forwardRef! That’s the problem!
Not I know that to fix.
I just found that there is no simple way to disable this error, and the only way is to set wrong logLevel.
I will look into the code, look like I could just suspend those errors, if unprocessed part of a tree does not contain any components, thus that’s not a bit deal to no process it.
Error, listed in Issue - still could be present. The only way to fix it - use react-dom patches, and let react-dom do the job. So you can fix it.
Error due to “styled-components”, ie forwardRef - fixed.
@philiiiiiipp the reapplying css thing is a known bug that will be fixed shortly: https://github.com/styled-components/styled-components/pull/2188
As far as HMR goes, I’m not sure. Does RHL have any compat issues with React.forwardRef? That and using the new context implementation is the only real change that would affect HMR in v4.
@theKashey Is this considered fixed with latest release ? ie. 4.6.0 ? I still see this error and was wondering if its on my side the issue or if this is still work to do on this. Thanks for your help & work on this library, we all appreciate what you do.
Would be cool to have this fixed! 😇
That’s not a real error. Just the way RHL treat text nodes, and the way React doing it - is a bit different. The problem here is a bit different - React-Hot-Loader ignores non-children-based component trees. Content, Author and Time in this case. It actually might( not should ) lead just to internal component’s state loss, but not to problems with re-rendering. I am afraid, but we don’t a single test for cases like this.
I’ll take a look on your example.