[v4] Page reloads every second component change (Redux connected)

[rusty3]

Description

This issue is happening on a bare setup with latest React Hot Loader V4 when updating Redux connected component.

Expected behaviour

Component should be updated without page reload.

Actual behaviour

Component is hot updated on the FIRST change, however every second change the following errors happen and the page is reloaded.

[HMR] Cannot apply update. Need to do a full reload!
[HMR] Error: Aborted because ./src/ConnectedContainer.js is not accepted
...

Environment

React Hot Loader version: v4 (latest beta 17)
node v8.9.1
npm 5.6.0
OS: macOS Sierra 10.12.6
Browser: Chrome Version 63.0.3239.132 (Official Build) (64-bit)

Reproducible Demo

https://github.com/rusty3/react-hot-loader-redux-connect-issue

[theKashey]

@rusty3, you made my day.
We have introduced cyclic dependency in our code, and everything is broken.

[gregberge]

Fixed in 4.0.0-beta.18.

[eXaminator]

Was this error somehow reintroduced? I'm seeing this exact behaviour and error with 4.3.2. All I did was exactly what is documented in the readme. It's a big application with a small (lazy loaded) react part, so it might be something in my general setup. But it is strange that it works on the first change but mot the second.

[theKashey]

@eXaminator - any error in console, especially with setConfig({logLevel:'debug'})?

[meds]

@eXaminator I am having the problem too! My app is much more simple, I followed the documentation and every second component change I get a fullscreen reload..

I tried installing 4.0.0-beta.18 to see if it would help but no luck...

My console when doing a successful hot reload::

logger.js:30 React-stand-in:, Non-controlled class Connect(Home) contains a new native or bound function setWrappedInstance ƒ setWrappedInstance(ref) {
this.wrappedInstance = ref;
} . Unable to reproduce
warn @ logger.js:30
(anonymous) @ inject.js:52
mergeComponents @ inject.js:39
update @ createClassProxy.js:226
updateProxyById @ proxies.js:57
register @ reactHotLoader.js:26
(anonymous) @ index.tsx:37
(anonymous) @ index.tsx:37
./src/pages/Home/index.tsx @ index.tsx:37
webpack_require @ bootstrap 51541fad94f0e298afc9:678
fn @ bootstrap 51541fad94f0e298afc9:88
(anonymous) @ App.css?ec41:26
./src/App.tsx @ App.tsx:31
webpack_require @ bootstrap 51541fad94f0e298afc9:678
hotApply @ bootstrap 51541fad94f0e298afc9:607
(anonymous) @ bootstrap 51541fad94f0e298afc9:289
Promise.then (async)
hotUpdateDownloaded @ bootstrap 51541fad94f0e298afc9:288
hotAddUpdateChunk @ bootstrap 51541fad94f0e298afc9:265
webpackHotUpdateCallback @ bootstrap 51541fad94f0e298afc9:7
(anonymous) @ 0.51541fad94f0e298afc9.hot-update.js:1
logger.js:30 React-stand-in: Updated class Connect(Home) contains native or bound function notifyNestedSubs ƒ notifyNestedSubs() {
this.listeners.notify();
} . Unable to reproduce, use arrow functions instead. (arity: 0/0, proto: no
warn @ logger.js:30
(anonymous) @ inject.js:55
mergeComponents @ inject.js:39
update @ createClassProxy.js:226
updateProxyById @ proxies.js:57
register @ reactHotLoader.js:26
(anonymous) @ index.tsx:37
(anonymous) @ index.tsx:37
./src/pages/Home/index.tsx @ index.tsx:37
webpack_require @ bootstrap 51541fad94f0e298afc9:678
fn @ bootstrap 51541fad94f0e298afc9:88
(anonymous) @ App.css?ec41:26
./src/App.tsx @ App.tsx:31
webpack_require @ bootstrap 51541fad94f0e298afc9:678
hotApply @ bootstrap 51541fad94f0e298afc9:607
(anonymous) @ bootstrap 51541fad94f0e298afc9:289
Promise.then (async)
hotUpdateDownloaded @ bootstrap 51541fad94f0e298afc9:288
hotAddUpdateChunk @ bootstrap 51541fad94f0e298afc9:265
webpackHotUpdateCallback @ bootstrap 51541fad94f0e298afc9:7
(anonymous) @ 0.51541fad94f0e298afc9.hot-update.js:1

and when doing an unsuccessful one:

index.cjs.js:125
It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/';

./node_modules/firebase/dist/index.cjs.js @ index.cjs.js:125
webpack_require @ bootstrap fb00d4a6edd6f1b9cd31:678
fn @ bootstrap fb00d4a6edd6f1b9cd31:88
(anonymous) @ reducer.ts:63
./src/redux/sagas.ts @ sagas.ts:59
webpack_require @ bootstrap fb00d4a6edd6f1b9cd31:678
fn @ bootstrap fb00d4a6edd6f1b9cd31:88
(anonymous) @ sagas.ts:59
./src/redux/store.ts @ store.ts:18
webpack_require @ bootstrap fb00d4a6edd6f1b9cd31:678
fn @ bootstrap fb00d4a6edd6f1b9cd31:88
(anonymous) @ App.css?ec41:26
./src/App.tsx @ App.tsx:31
webpack_require @ bootstrap fb00d4a6edd6f1b9cd31:678
fn @ bootstrap fb00d4a6edd6f1b9cd31:88
./src/index.tsx @ index.tsx:1
webpack_require @ bootstrap fb00d4a6edd6f1b9cd31:678
fn @ bootstrap fb00d4a6edd6f1b9cd31:88
0 @ request.ts:54
webpack_require @ bootstrap fb00d4a6edd6f1b9cd31:678
(anonymous) @ bootstrap fb00d4a6edd6f1b9cd31:724
(anonymous) @ bootstrap fb00d4a6edd6f1b9cd31:724
index.js:2178 Warning: Unsafe legacy lifecycles will not be called for components using new component APIs.

Modal uses getDerivedStateFromProps() but also contains the following legacy lifecycles:
componentWillReceiveProps
componentWillUpdate

The above lifecycles should be removed. Learn more about this warning here:
https://fb.me/react-async-component-lifecycle-hooks
stack_frame_overlay_proxy_console @ index.js:2178
printWarning @ warning.js:33
warning @ warning.js:57
constructClassInstance @ react-dom.development.js:11373
updateClassComponent @ react-dom.development.js:13036
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
scheduleRootUpdate @ react-dom.development.js:16663
updateContainerAtExpirationTime @ react-dom.development.js:16690
updateContainer @ react-dom.development.js:16717
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17000
(anonymous) @ react-dom.development.js:17140
unbatchedUpdates @ react-dom.development.js:16557
legacyRenderSubtreeIntoContainer @ react-dom.development.js:17136
render @ react-dom.development.js:17195
./src/index.tsx @ index.tsx:7
webpack_require @ bootstrap fb00d4a6edd6f1b9cd31:678
fn @ bootstrap fb00d4a6edd6f1b9cd31:88
0 @ request.ts:54
webpack_require @ bootstrap fb00d4a6edd6f1b9cd31:678
(anonymous) @ bootstrap fb00d4a6edd6f1b9cd31:724
(anonymous) @ bootstrap fb00d4a6edd6f1b9cd31:724
index.js:2178 Warning: Unsafe legacy lifecycles will not be called for components using new component APIs.

ButtonBase uses getDerivedStateFromProps() but also contains the following legacy lifecycles:
componentWillReceiveProps
componentWillUpdate

The above lifecycles should be removed. Learn more about this warning here:
https://fb.me/react-async-component-lifecycle-hooks
stack_frame_overlay_proxy_console @ index.js:2178
printWarning @ warning.js:33
warning @ warning.js:57
constructClassInstance @ react-dom.development.js:11373
updateClassComponent @ react-dom.development.js:13036
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
scheduleRootUpdate @ react-dom.development.js:16663
updateContainerAtExpirationTime @ react-dom.development.js:16690
updateContainer @ react-dom.development.js:16717
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:17000
(anonymous) @ react-dom.development.js:17140
unbatchedUpdates @ react-dom.development.js:16557
legacyRenderSubtreeIntoContainer @ react-dom.development.js:17136
render @ react-dom.development.js:17195
./src/index.tsx @ index.tsx:7
webpack_require @ bootstrap fb00d4a6edd6f1b9cd31:678
fn @ bootstrap fb00d4a6edd6f1b9cd31:88
0 @ request.ts:54
webpack_require @ bootstrap fb00d4a6edd6f1b9cd31:678
(anonymous) @ bootstrap fb00d4a6edd6f1b9cd31:724
(anonymous) @ bootstrap fb00d4a6edd6f1b9cd31:724
content_script.js:24 initializing Content Script message listener

[eXaminator]

I'm on a trip right now, so I'll check once I'm back at work in about a week! meds <[email protected]> schrieb am Fr., 15. Juni 2018, 08:21:

…

@eXaminator <https://github.com/eXaminator> I am having the problem too! My app is much more simple, I followed the documentation and every second component change I get a fullscreen reload.. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#820 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACoY_ObsZGt1WhH1_KaNE3zbo4f-CE4-ks5t82BIgaJpZM4Rsqru> .

[theKashey]

Hey! Don't use RHL 4.0 beta versions - install the latest one!

[meds]

I found the cause of the problem in my case, in app.tsx I was initializing firebase in the global scope. When I moved it into 'onComponentDidMount()' my issue was resolved.

[njgraf512]

Having the same problem. Any suggestions would definitely be appreciated.

[theKashey]

@njgraf512 -using the latest version?