Reloading class modules results in class being called as a function and throwing an error
Author: DingoEatingFuzzCreated Jun 3, 2018Updated Feb 24, 2022
Description
When a transpiled ES6 class is reloaded, it is called as a function. This results in an error
Uncaught (in promise) TypeError: Cannot call a class as a function
at _classCallCheck (scatterplot-layer.js:5)
at ScatterplotLayer (scatterplot-layer.js:71)
at ProxyFacade (react-hot-loader.development.js:647)
at ReactCompositeComponent.js:303
at measureLifeCyclePerf (ReactCompositeComponent.js:73)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:302)
at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:277)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:185)
at Object.mountComponent (ReactReconciler.js:43)
at Object.updateChildren (ReactChildReconciler.js:119)It looks like there is already code to circumvent this issue if the module is a React Component class:
But not all class modules are React components. I ran into this using deck.gl ScatterplotLayer.
Expected behavior
This module should be called like new Component(...) instead of plain Component().
Actual behavior
This module falls into the isFunctionalComponent code path and throws a runtime error due to the transpiler typechecking.
Environment
React Hot Loader version: 4.2.0
Run these commands in the project folder and fill in their results:
node -v: 8.11.1npm -v: 5.6.0
Then, specify:
- Operating system: High Sierra
- Browser and version: Chrome 66
Source: gaearon/react-hot-loader