Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Emotion + Split files + extends class Bug #1196

Open
GuillaumeCisco opened this issue Mar 4, 2019 · 3 comments
Open

Emotion + Split files + extends class Bug #1196

GuillaumeCisco opened this issue Mar 4, 2019 · 3 comments
Milestone

Comments

@GuillaumeCisco
Copy link

GuillaumeCisco commented Mar 4, 2019

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 theKashey added this to the v5 milestone Mar 4, 2019
@theKashey
Copy link
Collaborator

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

@GuillaumeCisco
Copy link
Author

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

@theKashey
Copy link
Collaborator

This is the idea - #1138

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants