gaearon / gaearon/react-hot-loader
Emotion + Split files + extends class Bug
- 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
Assessment
This issue has not been assessed yet.