search

Shopify / shopify-app-template-remix

294 stars 120 forks source link

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

Closed codex5 closed 1 day ago

codex5 commented 2 weeks ago

Issue summary

My specs:

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

image

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
paulomarg commented 2 weeks ago

Hi, thanks for raising this. I just created an app and I'm not seeing this error on a freshly installed Firefox.

Can you confirm whether

Unfortunately, if we can't reproduce the error there's not a lot we can do here. I'd also recommend checking whether there is something wrong with the document request for the page that's failing.

codex5 commented 2 weeks ago

Hi, thanks for raising this. I just created an app and I'm not seeing this error on a freshly installed Firefox.

Can you confirm whether

  • you made any changes to the app after creating it?
  • the issue still happens if you try again?

Unfortunately, if we can't reproduce the error there's not a lot we can do here. I'd also recommend checking whether there is something wrong with the document request for the page that's failing.

hi @paulomarg Yes, I didn't make any changes on the fresh template yet. and this is the second app that I tried to create to reproduce the issue from my main app which has the same issue.

Are they any methods that we can identify what exactly the differences between server and client HTML content?

ccarlosm commented 2 weeks ago

In a new fresh installation this is the package.json I get and no problems of that kind:

"dependencies": {
    "@prisma/client": "^5.11.0",
    "@remix-run/dev": "^2.7.1",
    "@remix-run/node": "^2.7.1",
    "@remix-run/react": "^2.7.1",
    "@remix-run/serve": "^2.7.1",
    "@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.7.1",
    "@shopify/api-codegen-preset": "^1.0.1",
    "@types/eslint": "^8.40.0",
    "@types/node": "^20.6.3",
    "@types/react": "^18.2.31",
    "@types/react-dom": "^18.2.14",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^9.1.0",
    "prettier": "^3.2.4",
    "typescript": "^5.2.2",
    "vite": "^5.1.3"
  },

node version: v20.11.1

However youn can reproduce the probem if you place a Polaris List element into a Text element for example:

app._index.tsx
----------------

<Text variant="bodyMd" as="p">
   <List>
       <List.Item>
            <!-- Rest of the code here -->
       </List.Item>
   </List>
</Text>

It has to be with HTML wrapping elements as it seems in: https://stackoverflow.com/questions/71706064/react-18-hydration-failed-because-the-initial-ui-does-not-match-what-was-render

codex5 commented 2 weeks ago

In a new fresh installation this is the package.json I get and no problems of that kind:

"dependencies": {
    "@prisma/client": "^5.11.0",
    "@remix-run/dev": "^2.7.1",
    "@remix-run/node": "^2.7.1",
    "@remix-run/react": "^2.7.1",
    "@remix-run/serve": "^2.7.1",
    "@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.7.1",
    "@shopify/api-codegen-preset": "^1.0.1",
    "@types/eslint": "^8.40.0",
    "@types/node": "^20.6.3",
    "@types/react": "^18.2.31",
    "@types/react-dom": "^18.2.14",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^9.1.0",
    "prettier": "^3.2.4",
    "typescript": "^5.2.2",
    "vite": "^5.1.3"
  },

node version: v20.11.1

However youn can reproduce the probem if you place a Polaris List element into a Text element for example:

app._index.tsx
----------------

<Text variant="bodyMd" as="p">
   <List>
       <List.Item>
            <!-- Rest of the code here -->
       </List.Item>
   </List>
</Text>

It has to be with HTML wrapping elements as it seems in: https://stackoverflow.com/questions/71706064/react-18-hydration-failed-because-the-initial-ui-does-not-match-what-was-render

yeah I had put the same packages' versions like what you have before, and I got the same issue. That's why I tried to change the versions to the latest ones.

I'm going to test again using another laptop to see what happen, look like the issue is from my macbook itself

Thanks

paulomarg commented 2 weeks ago

I'm going to test again using another laptop to see what happen, look like the issue is from my macbook itself

One thing that can cause this sort of issues is browser extensions, some extensions might embed code into pages you visit which would likely cause hydration errors like that.

Let us know if you're still running into issues!

github-actions[bot] commented 1 day ago

We are closing this issue because we did not hear back regarding additional details we needed to resolve this issue. If the issue persists and you are able to provide the missing clarification we need, you can respond here or create a new issue.

We appreciate your understanding as we try to manage our number of open issues.