Open haunguyenlxag opened 1 year ago
Hi! Unfortunately, hydration errors are really hard to debug in SSR React. The latest version of the demo-store is deployed to https://hydrogen.shop/ and it doesn't show any error there so I'm not sure why you're getting this in your deployment.
I'd recommend commenting out portions of the code until the error is gone. Then, add back a few components at a time and try to find which element introduces it.
Hi! Unfortunately, hydration errors are really hard to debug in SSR React. The latest version of the demo-store is deployed to https://hydrogen.shop/ and it doesn't show any error there so I'm not sure why you're getting this in your deployment.
I'd recommend commenting out portions of the code until the error is gone. Then, add back a few components at a time and try to find which element introduces it.
We use the Hydrogen app to deploy (https://apps.shopify.com/hydrogen). It works well.
However, when uploading to netlify (https://shopify.dev/custom-storefronts/hydrogen/deployment#deploy-to-netlify) to deploy it shows an error Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful
Hey @haunguyenlxag, have you enabled password protection on the site in Netlify? I get this error if I enable it, but not if it's disabled. Hope this helps you, even though it doesn't answer why the error happens.
Hey @haunguyenlxag, have you enabled password protection on the site in Netlify? I get this error if I enable it, but not if it's disabled. Hope this helps you, even though it doesn't answer why the error happens.
No, I don't enabled password on Netlify.
Oh I think I know why you're getting this error. You are missing @netlify/hydrogen-platform
from your package.json
.
Run npm i -D @netlify/hydrogen-platform
and add the plugin to your vite.config.js
like this
export default defineConfig({
plugins: [hydrogen(), netlifyPlugin()],
// ...
})
Check Netlifys guide here: https://github.com/netlify/hydrogen-platform#installation
Describe the bug Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful
To Reproduce Python version set to 2.7 Now using node v16.19.0 (npm v8.19.3) Using ruby version 2.7.2 Using PHP version 8.0
Steps to reproduce the behaviour below:
Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful
Expected behaviour Error on console.log is gone Screenshots{ "name": "tempabc", "description": "Demo store template for @shopify/hydrogen", "version": "0.0.0", "license": "MIT", "private": true, "engines": { "node": ">=16.14.0" }, "scripts": { "dev": "shopify hydrogen dev", "build": "shopify hydrogen build", "preview": "shopify hydrogen preview", "lint": "eslint --ext .js,.jsx,.ts,.tsx src", "lint-ts": "tsc --noEmit", "test": "WATCH=true vitest", "test:ci": "yarn build -t node && vitest run" }, "devDependencies": { "@shopify/cli": "3.13.0", "@shopify/cli-hydrogen": "3.13.0", "@shopify/prettier-config": "^1.1.2", "@tailwindcss/forms": "^0.5.2", "@tailwindcss/typography": "^0.5.2", "eslint": "^8.18.0", "eslint-plugin-hydrogen": "^0.12.3", "playwright": "^1.22.2", "postcss": "^8.4.14", "postcss-import": "^14.1.0", "postcss-preset-env": "^7.6.0", "prettier": "^2.3.2", "tailwindcss": "^3.0.24", "vite": "^2.9.13", "vitest": "^0.15.2" }, "prettier": "@shopify/prettier-config", "dependencies": { "@headlessui/react": "^1.7.0", "@shopify/hydrogen": "^1.6.5", "clsx": "^1.1.1", "graphql-tag": "^2.12.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-use": "^17.4.0", "typographic-base": "^1.0.4" }, "author": "apac" }