gaearon / gaearon/react-hot-loader
index.js:2178 React-hot-loader: reconciliation failed could not dive into * while some elements are still present in the tree.
- Dominant language
- JavaScript
- Stars
- 12.2k
- Forks
- 775
- PR merge metrics
- No merged PRs in 30d
Description
### 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:
1. `node -v`: v10.7.0
2. `npm -v`: 6.2.0
Then, specify:
1. Operating system: MacOS 10.13.6
2. 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)
https://codesandbox.io/embed/9312qo9k4o
Contributor guide
Assessment
This issue has not been assessed yet.