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

tyler_nguyen · ‎07-08-2024

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

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 problem

Create a new app by running yarn create @Shopify/app
Run npm run dev to start the app proxy
Open the app on your development store
Open the console tab from the browser inspector
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

Shopify App and Theme customize developer
Skype ID: tyler_6642
Email: cafesang161@gmail.com
(Other platforms: Magento - Odoo - Wordpress - Prestashop - Opencart - Laravel)

ArtemBusygin · ‎09-10-2024

Have you found a solution?

MykolaGC · ‎10-10-2024

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

tyler_nguyen · ‎10-21-2024

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

I'm going to share it here soon

Shopify App and Theme customize developer
Skype ID: tyler_6642
Email: cafesang161@gmail.com
(Other platforms: Magento - Odoo - Wordpress - Prestashop - Opencart - Laravel)

huykon225 · ‎11-19-2024

Hi @tyler_nguyen can you share the solution?

arshadm · ‎11-26-2024

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.

Jannik-Wempe · ‎11-26-2024

Thanks, this has fixed it for me!

huykon225 · ‎11-29-2024

exactly

tyler_nguyen · ‎11-29-2024

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.

Shopify App and Theme customize developer
Skype ID: tyler_6642
Email: cafesang161@gmail.com
(Other platforms: Magento - Odoo - Wordpress - Prestashop - Opencart - Laravel)

tyler_nguyen · ‎11-29-2024

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"
},

Shopify App and Theme customize developer
Skype ID: tyler_6642
Email: cafesang161@gmail.com
(Other platforms: Magento - Odoo - Wordpress - Prestashop - Opencart - Laravel)

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