Emotion + Split files + extends class Bug

[GuillaumeCisco]

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), <anonymous>: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.

[theKashey]

Known issue, and one of 3 major ones. The plain was to solve it in v5, but it was delayed a bit.

[GuillaumeCisco]

Thanks @theKashey, it somehow reassures me. Can you link me to the known issue.

[theKashey]

This is the idea - https://github.com/gaearon/react-hot-loader/issues/1138