-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Description
Reproduction
Go to https://stackblitz.com/edit/remix-run-remix-8frxmh
In root.tsx there is a <style> element after <Links>.
In routes/_index.tsx there is an ErrorBoundary, and route component throws an error.
On page refresh SSR works correctly, but hydration fails with Error: Hydration failed because the initial UI does not match what was rendered on the server., and tailwind styles are gone. This only happens in development mode.
System Info
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.20.3 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.2.3 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
@remix-run/dev: * => 2.9.2
@remix-run/node: * => 2.9.2
@remix-run/react: * => 2.9.2
@remix-run/serve: * => 2.9.2
vite: ^5.1.0 => 5.3.0Used Package Manager
npm
Expected Behavior
Error boundary is shown, tailwind styles work, there is no hydration error.
Actual Behavior
Hydration fails, tailwind styles are missing after hydration
My use case for adding additional elements after <Links> is adding additional styles (that need to override the default styles), where stylesheet I add depends on loader data, so I can't use links route module export.