Hydration failed because the initial UI does not match what was rendered on the server html - head

Shopify Apps
1

Issue summary

My environment:

  • Node version: v20.15.0
  • Operating system: MacOS Sonoma
  • Firefox with no extension

My package.json packages

"dependencies": {
    "@prisma/client": "^5.11.0",
    "@remix-run/dev": "^2.10.0",
    "@remix-run/node": "^2.10.0",
    "@remix-run/react": "^2.10.0",
    "@remix-run/serve": "^2.10.0",
    "@shopify/app-bridge-react": "^4.1.2",
    "@shopify/polaris": "^12.0.0",
    "@shopify/shopify-api": "^11.1.0",
    "@shopify/shopify-app-remix": "^3.0.2",
    "@shopify/shopify-app-session-storage-prisma": "^5.0.2",
    "isbot": "^5.1.0",
    "prisma": "^5.11.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vite-tsconfig-paths": "^4.3.1"
  },
  "devDependencies": {
    "@remix-run/eslint-config": "^2.10.0",
    "@shopify/api-codegen-preset": "^1.0.1",
    "@types/eslint": "^8.50.0",
    "@types/node": "^20.6.4",
    "@types/react": "^18.2.32",
    "@types/react-dom": "^18.2.15",
    "eslint": "^8.44.0",
    "eslint-config-prettier": "^9.1.0",
    "prettier": "^3.2.4",
    "typescript": "^5.2.2",
    "vite": "^5.1.3"
  },

Expected behavior

The app should work properly without any errors thrown on the console inspector.

Actual behavior

tyler_nguyen_3-1720479784542.png
tyler_nguyen_3-1720479784542.png1618×2036 454 KB

The app can not work properly, the UI can be loaded, but the remix routes are not working.
Also there are hydration error messages from the console.

Steps to reproduce the problem1. Create a new app by running yarn create @Shopify_77 /app

  1. Run npm run dev to start the app proxy
  2. Open the app on your development store
  3. Open the console tab from the browser inspector
  4. You gonna see the error messages

Debug logs

Warning: Expected server HTML to contain a matching <head> in <html>.
head
html
App
RenderedRoute@https://marshall-stage-bangladesh-therapy.trycloudflare.com/node_modules/.vite/deps/chunk-FPLWQC6Y.js?v=cedce92b:400:7
RenderErrorBoundary@https://marshall-stage-bangladesh-therapy.trycloudflare.com/node_modules/.vite/deps/chunk-FPLWQC6Y.js?v=cedce92b:357:5
DataRoutes@https://marshall-stage-bangladesh-therapy.trycloudflare.com/node_modules/.vite/deps/chunk-FPLWQC6Y.js?v=cedce92b:1386:7
Router@https://marshall-stage-bangladesh-therapy.trycloudflare.com/node_modules/.vite/deps/chunk-FPLWQC6Y.js?v=cedce92b:744:7
RouterProvider@https://marshall-stage-bangladesh-therapy.trycloudflare.com/node_modules/.vite/deps/chunk-FPLWQC6Y.js?v=cedce92b:1203:7
RemixErrorBoundary@https://marshall-stage-bangladesh-therapy.trycloudflare.com/node_modules/.vite/deps/chunk-FPLWQC6Y.js?v=cedce92b:2736:5
RemixBrowser@https://marshall-stage-bangladesh-therapy.trycloudflare.com/node_modules/.vite/deps/chunk-FPLWQC6Y.js?v=cedce92b:4300:46

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    React 12
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-VRMXEQCD.js:15
    js index.js:6
    __require chunk-VRMXEQCD.js:15
    React 2
    __require chunk-VRMXEQCD.js:15
    js React
    __require chunk-VRMXEQCD.js:15
    <anonymous> chunk-FPLWQC6Y.js:43

Error: Hydration failed because the initial UI does not match what was rendered on the server.
    React 9
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-VRMXEQCD.js:15
    js index.js:6
    __require chunk-VRMXEQCD.js:15
    React 2
    __require chunk-VRMXEQCD.js:15
    js React
    __require chunk-VRMXEQCD.js:15
    <anonymous> chunk-FPLWQC6Y.js:43
2

Have you found a solution?

3

I have same issue - and no idea how to solve this issue

4

hey I sorted the issue already by adding an override section into the package.json file

I’m going to share it here soon

5

I was having a similar issue, and in my case it was a browser plugin (Grammarly) that was adding additional attributes on the body tag. Disabled it and the issue has disappeared.

6

Thanks, this has fixed it for me!

7

there are tons of extensions that can affect to the body HTML, so we can’t add the end users to disable their browser’s extensions to be able to use our app, this is the important thing.

8

see what I have done to fix the issue

just adding these lines into package.json object

"resolutions": {
  "undici": "6.13.0"
},
"overrides": {
  "undici": "6.13.0"
},
9

Make sure your Meta and Links components are above any custom meta tags in head in root file.

export default function App() {
  return (
10

Hey, try turning off extensions; some extensions can cause issues, mostly VPNs. Open in incognito mode.

11

I started to turn off extension and surprisingly upon removing ExpressVPN the error was solved.