Minified React error #418 when bitwarden browser extension is enabled

[slifty]

When I have the Bitwarden Firefox extension enabled I get a flash of styled content followed by an unstyled version of the site.

Console reveals this error: https://react.dev/errors/418?invariant=418

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch[missing argument]

[slifty]

I spent some time poking around just in case there were obvious ways to make the hydration more robust -- I think this is just be a recently added bug with the bitwarden client and they're the ones who are going to need to deal with it: https://github.com/bitwarden/clients/issues/11470

I will note, though, that other Remix sites have the hydration error but it doesn't break styling entirely; I'll spend another moment seeing if there is any way to have the client side rendering manage to style more effectively somehow.

[gausie]

Yeah I guess we can say that we don't support any browser extension that injects HTML in whatever new way bitwarden is using that makes React think hydration has failed

[slifty]

Makes sense -- I think the only actual "fix" that could be reasonable is just making sure that client side rendering styled things properly, but I also didn't see anything obvious that would make the styling work better in that context.

Happy to close this as wontfix, though now I'm a sad panda as I don't get to use the museum any more 😭