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:

https://github.com/gaearon/react-hot-loader/blob/2ec25210c8a2704a9a0818a49c1f897c3e579e86/src/proxy/createClassProxy.js#L114

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:

  1. node -v: 8.11.1
  2. npm -v: 5.6.0

Then, specify:

  1. Operating system: High Sierra
  2. Browser and version: Chrome 66

Source: gaearon/react-hot-loader