reconcilation failed due to error ReferenceError: areArgumentsShallowlyEqual is not defined #995

balciseri · 2018-05-29T00:19:02Z

Description

Hot reloading fails for files using reselect.

Removing all calls to reselect function fixes the issue for that file.

Expected behavior

React hot loader normal behavior

Actual behavior

react-hot-loader.development.js:159 React-hot-loader: reconcilation failed due to error ReferenceError: areArgumentsShallowlyEqual is not defined
    at ProxyComponent.eval [as totalScoreSelector] (eval at __reactstandin__regenerateByEval (IdolsApp.jsx:298), <anonymous>:9:5)
    at ProxyComponent.render (IdolsApp.jsx:233)
    at ProxyComponent.hotComponentRender (react-hot-loader.development.js:608)
    at render (react-hot-loader.development.js:1112)
    at hotReplacementRender (react-hot-loader.development.js:1241)
    at next (react-hot-loader.development.js:1259)
    at react-hot-loader.development.js:1323
    at Array.forEach (<anonymous>)
    at hotReplacementRender (react-hot-loader.development.js:1246)
    at next (react-hot-loader.development.js:1259)

Environment

React Hot Loader version:

react-hot-loader@4.2.0

Run these commands in the project folder and fill in their results:

node -v: v10.1.0
npm -v: 6.0.1

Then, specify:

Operating system: Windows 10
Browser and version: Chrome Versione 66.0.3359.181

This might be related to:
#984

The text was updated successfully, but these errors were encountered:

theKashey · 2018-05-29T00:54:35Z

This is more about #978
Sorry - there is no cure yet, except moving "that" off constructor, away from RHL hands.

Could you please provide the your code, as long reselect usually used in a component constructor.

balciseri · 2018-05-29T11:25:38Z

clone https://github.com/balciseri/RHL-bug
run yarn
run yarn start
navigate to http://localhost:3001/
now open `.\client\components\App.jsx
try to modify the string <p>Modify me and save!</p>

Console output:

[HMR] bundle rebuilding
client.js:242 [HMR] bundle rebuilt in 487ms
process-update.js:41 [HMR] Checking for updates on the server...
process-update.js:114 [HMR] Updated modules:
process-update.js:116 [HMR]  - ./client/components/App.jsx
process-update.js:121 [HMR] App is up to date.
react-hot-loader.development.js:159 React-hot-loader: reconcilation failed due to error ReferenceError: areArgumentsShallowlyEqual is not defined
    at ProxyComponent.eval [as testSelector] (eval at __reactstandin__regenerateByEval (App.jsx:22), <anonymous>:9:5)
    at ProxyComponent.render (App.jsx:15)
    at ProxyComponent.hotComponentRender (react-hot-loader.development.js:608)
    at render (react-hot-loader.development.js:1112)
    at hotReplacementRender (react-hot-loader.development.js:1241)
    at next (react-hot-loader.development.js:1259)
    at react-hot-loader.development.js:1323
    at Array.forEach (<anonymous>)
    at hotReplacementRender (react-hot-loader.development.js:1246)
    at next (react-hot-loader.development.js:1259)
warn @ react-hot-loader.development.js:159
hotReplacementRender$1 @ react-hot-loader.development.js:1352
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:206
hotApply @ bootstrap:587
cb @ process-update.js:66
(anonymous) @ process-update.js:82
Promise.then (async)
check @ process-update.js:81
./node_modules/webpack-hot-middleware/process-update.js.module.exports @ process-update.js:42
processMessage @ client.js:268
handleMessage @ client.js:136
handleMessage @ client.js:99
VM400:9 Uncaught ReferenceError: areArgumentsShallowlyEqual is not defined
    at ProxyComponent.eval [as testSelector] (eval at __reactstandin__regenerateByEval (App.jsx:22), <anonymous>:9:5)
    at ProxyComponent.render (App.jsx:15)
    at ProxyComponent.hotComponentRender (react-hot-loader.development.js:608)
    at ProxyComponent.proxiedRender (react-hot-loader.development.js:616)
    at finishClassComponent (react-dom.development.js:13085)
    at updateClassComponent (react-dom.development.js:13047)
    at beginWork (react-dom.development.js:13715)
    at performUnitOfWork (react-dom.development.js:15741)
    at workLoop (react-dom.development.js:15780)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
(anonymous) @ VM400:9
render @ App.jsx:15
hotComponentRender @ react-hot-loader.development.js:608
proxiedRender @ react-hot-loader.development.js:616
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
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
replayUnitOfWork @ react-dom.development.js:15194
renderRoot @ react-dom.development.js:15840
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:206
hotApply @ bootstrap:587
cb @ process-update.js:66
(anonymous) @ process-update.js:82
Promise.then (async)
check @ process-update.js:81
./node_modules/webpack-hot-middleware/process-update.js.module.exports @ process-update.js:42
processMessage @ client.js:268
handleMessage @ client.js:136
handleMessage @ client.js:99
react-dom.development.js:14113 The above error occurred in the <App> component:
    in App (created by HotExportedApp)
    in AppContainer (created by HotExportedApp)
    in HotExportedApp

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.
logCapturedError @ react-dom.development.js:14113
logError @ react-dom.development.js:14152
callback @ react-dom.development.js:14838
callCallback @ react-dom.development.js:10764
commitUpdateQueue @ react-dom.development.js:10808
commitLifeCycles @ react-dom.development.js:14264
commitAllLifeCycles @ react-dom.development.js:15342
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15481
completeRoot @ react-dom.development.js:16496
performWorkOnRoot @ react-dom.development.js:16440
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:206
hotApply @ bootstrap:587
cb @ process-update.js:66
(anonymous) @ process-update.js:82
Promise.then (async)
check @ process-update.js:81
./node_modules/webpack-hot-middleware/process-update.js.module.exports @ process-update.js:42
processMessage @ client.js:268
handleMessage @ client.js:136
handleMessage @ client.js:99
react-hot-loader.development.js:166 ReferenceError: areArgumentsShallowlyEqual is not defined
    at ProxyComponent.eval [as testSelector] (eval at __reactstandin__regenerateByEval (App.jsx:22), <anonymous>:9:5)
    at ProxyComponent.render (App.jsx:15)
    at ProxyComponent.hotComponentRender (react-hot-loader.development.js:608)
    at ProxyComponent.proxiedRender (react-hot-loader.development.js:616)
    at finishClassComponent (react-dom.development.js:13085)
    at updateClassComponent (react-dom.development.js:13047)
    at beginWork (react-dom.development.js:13715)
    at performUnitOfWork (react-dom.development.js:15741)
    at workLoop (react-dom.development.js:15780)
    at renderRoot (react-dom.development.js:15820)
error @ react-hot-loader.development.js:166
componentDidCatch @ react-hot-loader.development.js:1455
componentDidCatch @ react-hot-loader.development.js:568
callback @ react-dom.development.js:14839
callCallback @ react-dom.development.js:10764
commitUpdateQueue @ react-dom.development.js:10808
commitLifeCycles @ react-dom.development.js:14264
commitAllLifeCycles @ react-dom.development.js:15342
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15481
completeRoot @ react-dom.development.js:16496
performWorkOnRoot @ react-dom.development.js:16440
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:206
hotApply @ bootstrap:587
cb @ process-update.js:66
(anonymous) @ process-update.js:82
Promise.then (async)
check @ process-update.js:81
./node_modules/webpack-hot-middleware/process-update.js.module.exports @ process-update.js:42
processMessage @ client.js:268
handleMessage @ client.js:136
handleMessage @ client.js:99
VM402:9 Uncaught ReferenceError: areArgumentsShallowlyEqual is not defined
    at ProxyComponent.eval [as testSelector] (eval at __reactstandin__regenerateByEval (App.jsx:22), <anonymous>:9:5)
    at ProxyComponent.render (App.jsx:15)
    at ProxyComponent.hotComponentRender (react-hot-loader.development.js:608)
    at ProxyComponent.proxiedRender (react-hot-loader.development.js:616)
    at finishClassComponent (react-dom.development.js:13085)
    at updateClassComponent (react-dom.development.js:13047)
    at beginWork (react-dom.development.js:13715)
    at performUnitOfWork (react-dom.development.js:15741)
    at workLoop (react-dom.development.js:15780)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
(anonymous) @ VM402:9
render @ App.jsx:15
hotComponentRender @ react-hot-loader.development.js:608
proxiedRender @ react-hot-loader.development.js:616
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
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
replayUnitOfWork @ react-dom.development.js:15194
renderRoot @ react-dom.development.js:15840
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:206
hotApply @ bootstrap:587
cb @ process-update.js:66
(anonymous) @ process-update.js:82
Promise.then (async)
check @ process-update.js:81
./node_modules/webpack-hot-middleware/process-update.js.module.exports @ process-update.js:42
processMessage @ client.js:268
handleMessage @ client.js:136
handleMessage @ client.js:99
react-dom.development.js:14113 The above error occurred in the <App> component:
    in App (created by HotExportedApp)
    in AppContainer (created by HotExportedApp)
    in HotExportedApp

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:14113
logError @ react-dom.development.js:14152
update.callback @ react-dom.development.js:14809
callCallback @ react-dom.development.js:10764
commitUpdateQueue @ react-dom.development.js:10808
commitLifeCycles @ react-dom.development.js:14283
commitAllLifeCycles @ react-dom.development.js:15342
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15481
completeRoot @ react-dom.development.js:16496
performWorkOnRoot @ react-dom.development.js:16440
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:206
hotApply @ bootstrap:587
cb @ process-update.js:66
(anonymous) @ process-update.js:82
Promise.then (async)
check @ process-update.js:81
./node_modules/webpack-hot-middleware/process-update.js.module.exports @ process-update.js:42
processMessage @ client.js:268
handleMessage @ client.js:136
handleMessage @ client.js:99
react-dom.development.js:16419 Uncaught ReferenceError: areArgumentsShallowlyEqual is not defined
    at ProxyComponent.eval [as testSelector] (eval at __reactstandin__regenerateByEval (App.jsx:22), <anonymous>:9:5)
    at ProxyComponent.render (App.jsx:15)
    at ProxyComponent.hotComponentRender (react-hot-loader.development.js:608)
    at ProxyComponent.proxiedRender (react-hot-loader.development.js:616)
    at finishClassComponent (react-dom.development.js:13085)
    at updateClassComponent (react-dom.development.js:13047)
    at beginWork (react-dom.development.js:13715)
    at performUnitOfWork (react-dom.development.js:15741)
    at workLoop (react-dom.development.js:15780)
    at renderRoot (react-dom.development.js:15820)

theKashey · 2018-05-29T13:09:46Z

Yeah, "class properties" are created inside constructor. So this supposed to fail.
Meanwhile - it should not break all the things.
Try/Catch around regeneration code will solve the problem.

balciseri · 2018-05-29T14:22:34Z

Thanks for the fast answers. I tought the same after reading #978.
I'm not quite sure where to put Try/Catch or Errorboundary dho ( i tried in different places but it still just errors out).
Are there any "ugly" tricks to make this work until a fix is found?

theKashey · 2018-05-29T23:43:43Z

@balciseri - initialize in componentWillMount. Not 16.3 very compatible, but will temporary fix the problem.
Gonna fix this in the next release. Related - #978

balciseri · 2018-05-30T11:14:19Z

Great!
In the meanwhile I did as you said and it works, so the problems are really mostly just in the constructor 😮
From:

class App extends React.Component {
  state = {
    count: 0
  };

  testSelector = createSelector(state => state.count, count => `Count is: ${count}`);

  render() {
    const testSelector = this.testSelector(this.state);
    return (
      <div>
        <p>{testSelector}</p>
        <p>Modify me and saves!</p>
      </div>
    );
  }
}

to

class App extends React.Component {
  state = {
    count: 0
  };
  componentWillMount() {
    this.testSelector = createSelector(
      state => state.count,
      count => `Count is: ${count}`
    );
  }

  render() {
    const testSelector = this.testSelector(this.state);
    return (
      <div>
        <p>{testSelector}</p>
        <p>Modify me and saves!!</p>
      </div>
    );
  }
}

…984

balciseri · 2018-06-06T13:00:15Z

I can confirm this fixed my reselect issues.
Thanks a lot

theKashey self-assigned this May 29, 2018

theKashey added the WIP label May 29, 2018

theKashey mentioned this issue Jun 4, 2018

🔥Not all methods could|should be updated #1001

Closed

theKashey added a commit that referenced this issue Jun 4, 2018

Dont reload function properties, revert #949, fixes #995, #978, #969, #…

7662c28

…984

theKashey mentioned this issue Jun 4, 2018

Don't reload functional properties #1002

Merged

theKashey added a commit that referenced this issue Jun 4, 2018

Dont reload function properties, revert #949, fixes #995, #978, #969, #…

5bfd8cf

…984

theKashey closed this as completed in #1002 Jun 5, 2018

theKashey mentioned this issue Jun 6, 2018

Reconciliation fails when using lodash/memoize #984

Open

theKashey mentioned this issue Jun 26, 2018

The end of React-Hot-Loader #1024

Open

Sakots2499 mentioned this issue Jul 13, 2018

Enable every async "loader" to work with RHL #1027

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

reconcilation failed due to error ReferenceError: areArgumentsShallowlyEqual is not defined #995

reconcilation failed due to error ReferenceError: areArgumentsShallowlyEqual is not defined #995

balciseri commented May 29, 2018

theKashey commented May 29, 2018

balciseri commented May 29, 2018 •

edited

Loading

theKashey commented May 29, 2018

balciseri commented May 29, 2018 •

edited

Loading

theKashey commented May 29, 2018

balciseri commented May 30, 2018

balciseri commented Jun 6, 2018

reconcilation failed due to error ReferenceError: areArgumentsShallowlyEqual is not defined #995

reconcilation failed due to error ReferenceError: areArgumentsShallowlyEqual is not defined #995

Comments

balciseri commented May 29, 2018

Description

Expected behavior

Actual behavior

Environment

theKashey commented May 29, 2018

balciseri commented May 29, 2018 • edited Loading

theKashey commented May 29, 2018

balciseri commented May 29, 2018 • edited Loading

theKashey commented May 29, 2018

balciseri commented May 30, 2018

balciseri commented Jun 6, 2018

balciseri commented May 29, 2018 •

edited

Loading

balciseri commented May 29, 2018 •

edited

Loading