Chrome extension breaks styled in SSR

Current behavior:

Styled is broken by some browser extensions. For example: Urban VPN Proxy

To reproduce: A minimal reproduction demo is created here with detailed description.

Expected behavior:

Extension should not affect styled if not intensional.

Environment information:

• react version: ^18.2.0
• @emotion/react version: ^11.10.5

[lucascurti]

Thanks @Andarist for looking into it and @flappyBug for the workaround. Another thing that gets rid of the issue is taking the Chakra UI approach to set up emotion: https://chakra-ui.com/getting-started/remix-guide

[flappyBug]

@lucascurti Currently we have a workaround to remove all the elements we don’t recognize before hydration. e.g. in your entry.client.tsx, before hydration:

document
  .querySelectorAll('html>:not(head,body)')
  .forEach((e) => document.documentElement.removeChild(e));
hydrate(<RemixBrowser />, document);

One drawback of this approach is that it may partially break some extensions’ functionality. I didn’t test it though, one may restore it after hydration:

const tamperedNodes = document
  .querySelectorAll('html>:not(head,body)');
tamperedNodes.forEach((e) => document.documentElement.removeChild(e));

hydrate(<RemixBrowser />, document);

tamperedNodes.forEach((e) => document.documentElement.appendChild(e));