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

SSR: hydration breaks when using emotion #553

Closed
irudoy opened this issue Apr 12, 2020 · 10 comments
Closed

SSR: hydration breaks when using emotion #553

irudoy opened this issue Apr 12, 2020 · 10 comments
Labels

Comments

@irudoy
Copy link

irudoy commented Apr 12, 2020

🐛 Bug Report

Hydration fails when using @emotion/styled as a loadable-component.

main-bundle-4c93d0b8.js:22 DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at su (http://localhost:9000/dist/web/main-bundle-4c93d0b8.js:22:86651)
    at dl (http://localhost:9000/dist/web/main-bundle-4c93d0b8.js:22:99858)
    at t.unstable_runWithPriority (http://localhost:9000/dist/web/main-bundle-4c93d0b8.js:30:3844)
    at $o (http://localhost:9000/dist/web/main-bundle-4c93d0b8.js:22:45024)
    at pl (http://localhost:9000/dist/web/main-bundle-4c93d0b8.js:22:97718)
    at Zu (http://localhost:9000/dist/web/main-bundle-4c93d0b8.js:22:93872)
    at Hu (http://localhost:9000/dist/web/main-bundle-4c93d0b8.js:22:90437)
    at jl (http://localhost:9000/dist/web/main-bundle-4c93d0b8.js:22:111885)
    at http://localhost:9000/dist/web/main-bundle-4c93d0b8.js:22:113128
    at tl (http://localhost:9000/dist/web/main-bundle-4c93d0b8.js:22:94020)

To Reproduce

Styled.js

import styled from '@emotion/styled';
const Styled = styled.div`color: turquoise;`;
export default Styled;

App.js

const Styled = loadable(() => import('./Styled'))
const App = () => <Styled>Hi</Styled>

Link to repl or repo

https://github.com/irudoy/emotion-loadable-repro (based on https://github.com/gregberge/loadable-components/tree/master/examples/server-side-rendering)

## System:
 - OS: macOS 10.15.4
 - CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
 - Memory: 1.87 GB / 16.00 GB
 - Shell: 5.7.1 - /bin/zsh
## Binaries:
 - Node: 13.10.1 - /usr/local/bin/node
 - Yarn: 1.22.4 - /usr/local/bin/yarn
 - npm: 6.14.2 - /usr/local/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - @loadable/babel-plugin: ^5.10.3 => 5.12.0
 - @loadable/component: ^5.10.3 => 5.12.0
 - @loadable/server: ^5.10.3 => 5.12.0
 - @loadable/webpack-plugin: ^5.7.1 => 5.12.0
@open-collective-bot
Copy link

Hey @irudoy 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use Loadable at work, you can also ask your company to sponsor us ❤️.

@prateekr1
Copy link

I am too facing this but I am using

Styled Components : 5.1.0

instead of emotion as specified above.

Below is the error trace

Error: Failed to execute 'removeChild' on 'Node':The node to be removed is not a child of this node.
at pl in http://localhost:3000/saassets/js/0a.7b09ed27.chunk.js
Line 1 : Column 188072
at anonymous in http://localhost:3000/saassets/js/0a.7b09ed27.chunk.js
Line 1 : Column 201483
at t.unstable_runWithPriority in http://localhost:3000/saassets/js/0a.7b09ed27.chunk.js
Line 1 : Column 222146
at Vo in http://localhost:3000/saassets/js/0a.7b09ed27.chunk.js
Line 1 : Column 146186
at xu in http://localhost:3000/saassets/js/0a.7b09ed27.chunk.js
Line 1 : Column 199362
at cu in http://localhost:3000/saassets/js/0a.7b09ed27.chunk.js
Line 1 : Column 195486
at iu in http://localhost:3000/saassets/js/0a.7b09ed27.chunk.js
Line 1 : Column 192032
at $u in http://localhost:3000/saassets/js/0a.7b09ed27.chunk.js
Line 1 : Column 213455
at anonymous inhttp://localhost:3000/saassets/js/0a.7b09ed27.chunk.js
Line 1 : Column 214695
at fu in http://localhost:3000/saassets/js/0a.7b09ed27.chunk.js
Line 1 : Column 195636

@theKashey
Copy link
Collaborator

I also was this issue in last error reports.

@prateekr1
Copy link

@theKashey Sorry, I dnt get you what you mean by below line

I also was this issue in last error reports.

@theKashey
Copy link
Collaborator

I saw this error in a NewRelic. However, was not able to found the root cause.

@stale
Copy link

stale bot commented Jul 12, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the wontfix label Jul 12, 2020
@irudoy
Copy link
Author

irudoy commented Jul 12, 2020

bump

@stale stale bot removed the wontfix label Jul 12, 2020
@Caerbannog
Copy link
Contributor

I'm not very confident, but it's possible that @emotion/cache solves the problem.
We used to have this issue. It diasppeared after various changes which included migrating from emotion's SSR "Default Approach" to the "Advanced Approach":
https://emotion.sh/docs/ssr#advanced-approach

@stale
Copy link

stale bot commented Sep 30, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the wontfix label Sep 30, 2020
@stale stale bot closed this as completed Oct 7, 2020
@irudoy
Copy link
Author

irudoy commented Oct 7, 2020

bump

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

No branches or pull requests

4 participants