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

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

tyler_nguyen
Shopify Partner
9 0 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

 
 

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

  1. Create a new app by running yarn create @Shopify/app
  2. Run npm run dev to start the app proxy
  3. Open the app on your development store
  4. Open the console tab from the browser inspector
  5. 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)
Replies 0 (0)