Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

v7 - Scripts|Links hydratation error in ErrorBoundary #12400

Closed
4FunAndProfit opened this issue Nov 26, 2024 · 4 comments
Closed

v7 - Scripts|Links hydratation error in ErrorBoundary #12400

4FunAndProfit opened this issue Nov 26, 2024 · 4 comments
Labels
bug

Comments

@4FunAndProfit
Copy link

4FunAndProfit commented Nov 26, 2024 •
edited
Loading

I'm using React Router as a...

framework

Reproduction

Just add <Scripts /> in ErrorBoundary in root.tsx then run dev, example:

export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
  return (
    <html>
      <head>
        <Links />
        <Meta />
      </head>
      <body>
        something
        <Scripts />

      </body>
    </html>
  );
}

You will have this hydratation error:

Warning: Expected server HTML to contain a matching <link> in <body>.
  at link
    at Scripts (http://localhost:5173/node_modules/.vite/deps/chunk-F5ZHWI7L.js?v=d43574d5:7879:66)
    at body
    at html
    at ErrorBoundary (http://localhost:5173/app/root.tsx?t=1732631760397:176:3)

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

My use case is to use mantine in error ErrorBoundary which requires scripts (https://mantine.dev/guides/remix/)

System Info

Browsers:
  Chrome: 131.0.6778.86

Used Package Manager

pnpm

Expected Behavior

Should not have hydratation error

Actual Behavior

hydratation error provoking mantine not working

Seem to have same behavior with in

@4FunAndProfit 4FunAndProfit changed the title Scripts hydratation error in ErrorBoundary v7 - Scripts hydratation error in ErrorBoundary Nov 26, 2024
@4FunAndProfit 4FunAndProfit changed the title v7 - Scripts hydratation error in ErrorBoundary v7 - Scripts|Links hydratation error in ErrorBoundary Nov 26, 2024
@timdorr
Copy link
Member

timdorr commented Nov 26, 2024

The ErrorBoundary doesn't need the full HTML content, as it will pull from the root Layout component. Adding <Scripts/> is redundant.

@timdorr timdorr closed this as completed Nov 26, 2024
@4FunAndProfit
Copy link
Author

4FunAndProfit commented Nov 26, 2024 •
edited
Loading

@timdorr, Just tried with layout! thanks it resolves a part, but not all.

Now I have the same issue than remix-run/remix#9144

See last comment of this issue for more information and an example to reproduce the issue

It appears that the <Links /> component generates <link> tags differently between the server and client.

server: <link ... />
client: <link ... >
which caused the warning and hydration failure.

Reproducible when running the tutorial.

@4FunAndProfit
Copy link
Author

4FunAndProfit commented Nov 27, 2024 •
edited
Loading

@timdorr in fact I Just tested again

The issue is the same if you go in layout or out layout

Please reopen as it is an issue I think

@msalahz
Copy link

msalahz commented Nov 29, 2024 •
edited
Loading

This is happening to me, too

{
  "name": "my-react-router-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "react-router build",
    "dev": "react-router dev",
    "start": "react-router-serve ./build/server/index.js",
    "typecheck": "react-router typegen && tsc --build --noEmit"
  },
  "dependencies": {
    "@react-router/node": "^7.0.1",
    "@react-router/serve": "^7.0.1",
    "isbot": "^5.1.17",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router": "^7.0.1"
  },
  "devDependencies": {
    "@react-router/dev": "^7.0.1",
    "@types/node": "^20",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.15",
    "typescript": "^5.6.3",
    "vite": "^5.4.11",
    "vite-tsconfig-paths": "^5.1.2"
  }
}

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@timdorr @msalahz @4FunAndProfit