[BUG] Minified React error when deploy production mode

[haunguyenlxag]

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:

1. We are using the default package: npm init @shopify/hydrogen -- --template demo-store
2. After pushing the code to github.
3. We use netlify to deploy.
4. After deploy success. Don't any error in deploy log
5. Check site empty. An error appeared under console.log. 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 Additional context Under local works fine Package.json { "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" }

[frandiox]

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.

[haunguyenlxag]

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

[kristofferso]

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.

[haunguyenlxag]

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.

[kristofferso]

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