gaearon / gaearon/react-hot-loader

Emotion + Split files + extends class Bug

Open
#1,196 3 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.2k
Forks
775
PR merge metrics
No merged PRs in 30d

Description

### Description

What you are reporting:

React hot loading bug with emotion when using a splitted file class extending from another one.

### Expected behavior

What you think should happen:

Classic react hot loading

### Actual behavior

What actually happens:

Fail to react hot load
```
⚛️🔥😭: hot update was not successful
ReferenceError: emotion__WEBPACK_IMPORTED_MODULE_5__ is not defined

Stack trace:
ReferenceError: emotion__WEBPACK_IMPORTED_MODULE_5__ is not defined
at ProxyComponent.eval [as h1] (eval at __reactstandin__regenerateByEval (http://localhost:3000/main.js:49386:19), :8:16)
at ProxyComponent.render (http://localhost:3000/main.8dfd54f29ab00a833752.hot-update.js:83:25)
at ProxyComponent.hotComponentRender (http://localhost:3000/main.js:35516:67)
at ProxyComponent.proxiedRender (http://localhost:3000/main.js:35536:36)
at ProxyComponent.componentRender (http://localhost:3000/main.js:37037:36)
at finishClassComponent (http://localhost:3000/main.js:29180:31)
at updateClassComponent (http://localhost:3000/main.js:29135:24)
at beginWork (http://localhost:3000/main.js:29981:16)
at performUnitOfWork (http://localhost:3000/main.js:32796:12)
at workLoop (http://localhost:3000/main.js:32836:24)
```
The emotion import is no longer available.

### Environment

React Hot Loader version:
4.6.3
Run these commands in the project folder and fill in their results:

1. `node -v`: v11.10.0
2. `npm -v`: 6.7.0

Then, specify:

1. Operating system: Linux, xubuntu 18.04
2. Browser and version: chromium 72.0.3626.81

### Reproducible Demo

Here is a repo where you can see it in action: https://github.com/GuillaumeCisco/emotion-react-hot-loader-bug
This repo is a light version of our project, I tried to remove the maximum boilerplate code.
The interesting folders for this issue will be `src/app` and `packages`.
This project uses a SSR Stream configuration.

Follow the README, simply run `yarn install`, `yarn start` go to `http:localhost:3000` and try modifying the file `abstract.js`. You will see the error.
You can see it can work correctly without splitting files using the `SurnameWithabstract` component from `src/app/index.js`, simply uncomment it and try modifiying whatever files.

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.