Interaction between Remix, Lastpass, and <link rel=stylesheet> and (possibly) @import

[giltayar]

What version of Remix are you using?

1.7.0

Steps to Reproduce

1. Install Lastpass (I think you should also be registered...?)
2. git clone https://github.com/giltayar/remix-import-css-lastpass-hydration-error-reproduction
3. npm install
4. npm run dev
5. This should show the page with no errors in console

Now...

1. Edit root.tsx and comment in the <link rel=stylesheet>.

Or...

1. Edit root.tsx and comment in the <style> tag.

Expected Behavior

Opening the page in Chrome or Firefox: No errors in the console

Actual Behavior

Errors in console*:

For Firefox, DevTools must be open (with "disable cache" checked in the Network tab). For Chrome, even closed will trigger the problematic behavior (!)

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server

and...

.
link
Scripts@http://localhost:3000/build/_shared/chunk-IMF64WG6.js:2851:7
body
html
App
RemixRoute@http://localhost:3000/build/_shared/chunk-IMF64WG6.js:2529:20
Routes2@http://localhost:3000/build/_shared/chunk-IMF64WG6.js:2513:7
Router@http://localhost:3000/build/_shared/chunk-IMF64WG6.js:741:7
RemixCatchBoundary@http://localhost:3000/build/_shared/chunk-IMF64WG6.js:1018:28
RemixErrorBoundary@http://localhost:3000/build/_shared/chunk-IMF64WG6.js:944:5
RemixEntry@http://localhost:3000/build/_shared/chunk-IMF64WG6.js:2406:20
RemixBrowser@http://localhost:3000/build/_shared/chunk-IMF64WG6.js:3150:27

Note that the error also happened to me when using a @import in an "emotion css" global rule (that is how I found it out). After much research, I found the problem also occurs with link rel. You have a reproduction of both in this repo.

Also note that Lastpass Definitely triggers the problem, but playing around with this reproduction shows me that all the other parameters are fluid in regards to reproducability:

1. Whether Chrome or Firefox
2. Whether devtools is open
3. Whether "disable cache" is turned on
4. Whether using links function, link rel in head, or using @import.

[tshddx]

I believe this is a very common issue with React 18 that mostly affects Remix apps because Remix puts React in charge of rendering the entire document. It is apparently also an issue in other frameworks as well. Apparently React 18.2 might fix some of these bugs. Have you tried 18.2?

• React 18 : Hydration failed because the initial UI does not match what was rendered on the server. #2570
• https://github.com/facebook/react/blob/main/CHANGELOG.md#1820-june-14-2022
• Support document rendering facebook/react#24523

[tshddx]

However, it appears that Remix users are reporting the issue persists in React 18.2:

#2570 (comment)

[giltayar]

Yes, we're using the latest remix and React 18.2.0.

[giltayar]

Some notes to anybody arriving here:

1. As @tshddx said, this is probably the same bug as React 18 : Hydration failed because the initial UI does not match what was rendered on the server. #2570
2. It is caused by Chrome/FF extensions that mutate the DOM (probably before React has a chance to hydrate)
3. It happens mostly in Remix because Remix renders/hydrates the whole HTML, while others render/hydrate only a <div id=root />
4. The problem is not just the error in the console. We use Emotion and the error causes it not (not sure why) to not add <style> tags to the header, and so the page hydrates without styles.
5. There is a workaround: replace hydrateRoot with pre-React 18 hydrate (in Remix, this is entry.client.tsx)

[JAD3N]

I was able to reproduce this by:

1. Using Firefox (tried on Chrome but it worked?) install the LastPass addon.
2. Log in to LastPass addon otherwise it works.
3. Use the Chakra UI template (which uses Emotion): npx create-remix@latest --template examples/chakra-ui
4. Add a font import: npm i @fontsource/inter
5. Add links export to root layout:

import fontStyles from "@fontsource/inter/variable.css";

export const links: LinksFunction = () => [
	{
		rel: "stylesheet",
		href: fontStyles,
	},
];

5. Navigate to app and hard refresh if necessary (toggling Firefox cache required a hard refresh to repeat the error for me).

It appears that the Emotion styles are being removed and never re-added for client-side rendering? The workaround by @giltayar works but as mentioned not being able to utilize the newer React features is a bit cumbersome.

Edit: After testing some more on Chrome it started happening as well (not sure why though).

Edit: I did some more research and found this workaround that allowed me to use the React 18 features. I found this by looking at: facebook/react#24430

function hydrate() {
  const emotionCache = createEmotionCache({ key: "css" });

  startTransition(() => {
    document.querySelectorAll("html > script").forEach((s) => {
      s.parentNode!.removeChild(s);
    });

    hydrateRoot(
      document,
      <StrictMode>
        <CacheProvider value={emotionCache}>
          <RemixBrowser />
        </CacheProvider>
      </StrictMode>
    );
  });
}

[KasparRosin]

react issue reference: facebook/react#24430

[tamm]

Had some similar issues, I came up with this to silence the errors but do not recommend using this in production as it will kill a lot of browser plugin functionality.

function clearBrowserPluginInjectionsBeforeHydration() {
  if (document.body.dataset) {
    Object.keys(document.body.dataset).map((attribute) => {
      delete document.body.dataset[attribute];
    });
  }

  setTimeout(
    () =>
      document.querySelectorAll("html > script, html > input").forEach((s) => {
        s.parentNode?.removeChild(s);
      }),
    0
  );
}

function hydrate() {
  startTransition(() => {
    clearBrowserPluginInjectionsBeforeHydration();

    hydrateRoot(
      document,
      <StrictMode>
        <ClientCacheProvider>
          <RemixBrowser />
        </ClientCacheProvider>
      </StrictMode>
    );
  });
}

[nicolaserny]

Some notes to anybody arriving here:

1. As @tshddx said, this is probably the same bug as React 18 : Hydration failed because the initial UI does not match what was rendered on the server. #2570
2. It is caused by Chrome/FF extensions that mutate the DOM (probably before React has a chance to hydrate)
3. It happens mostly in Remix because Remix renders/hydrates the whole HTML, while others render/hydrate only a <div id=root />
4. The problem is not just the error in the console. We use Emotion and the error causes it not (not sure why) to not add <style> tags to the header, and so the page hydrates without styles.
5. There is a workaround: replace hydrateRoot with pre-React 18 hydrate (in Remix, this is entry.client.tsx)

Sadly, the workaround with hydrate instead of hydrateRoot does not work anymore with Remix 1.7.X
When I upgrade from remix 1.6.8 to 1.7, it breaks my app by deleting my style component styles after hydration.
I know that css-in-js is not the recommended way. But when you have legacy code, it's a lot of code to migrate...

[KasparRosin]

@nicolaserny Weird, I'm using remix 1.7.2 with the hydrate fix and it works for me using styled-components.
There is an issue with styled-components, where sometimes the order of styles is messed up, but I believe it to be unrelated to the hydrate function.

[nicolaserny]

@KasparRosin, I don't think it's an order issue. First, I see the style tag in the head section. After the hydrate call, the style tag is completely removed (so I have no more CSS styles). I tested with remix 1.7.5 and react 18.2.0 with Chrome + extensions such as Loom. I will try to create a basic example.

[nicolaserny]

@KasparRosin It's pretty easy to reproduce. I downloaded the Remix styled component example: https://github.com/remix-run/examples/tree/main/styled-components.
First, I used remix 1.6.8. It works nicely even with a browser with extensions that modify the dom.
Next, update to remix 1.7.5. Now, the CSS styles are removed just after hydration when I use a browser with extensions. Interesting fact: the example does not use React 18 but React 17.0.2.

[MichaelDeBoey]

This is probably because one of your browser extensions is injecting code : https://remix.run/pages/gotchas#browser-extensions-injecting-code