SSR: hydration breaks when using emotion

[irudoy]

🐛 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]

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]

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]

I also was this issue in last error reports.

[prateekr1]

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

I also was this issue in last error reports.

[theKashey]

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

[stale]

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.

[irudoy]

bump

[Caerbannog]

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]

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.

[irudoy]

bump