gaearon / gaearon/react-hot-loader

Reloading class modules results in class being called as a function and throwing an error

Open
#1,000 10 comments 6 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.2k
Forks
775
PR merge metrics
No merged PRs in 30d

Description

### 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](https://github.com/uber/deck.gl/blob/master/modules/layers/src/scatterplot-layer/scatterplot-layer.js).

### 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.