React version mismatch when creating new projects

[frandiox]

If you are getting an error like Invalid hook call or similar when running npm create @shopify/hydrogen/latest, there is probably a React version mismatch in the CLI dependencies.

This is something that should be fix in Hydrogen and Shopify CLI but, in the meantime, you can try doing one of the following:

npm create @shopify/hydrogen@latest --legacy-peer-deps --cache ~/randomDir

This avoids installing peer dependencies, thus reducing the chance of getting multiple versions of React. Provide a random cache directory to avoid reusing preinstalled CLI versions in your global cache that don't use --legacy-peer-deps. Alternatively, you can run npm cache clean --force before installing it instead.

---

Once the project is created, ensure your React dependencies react and react-dom are pinned to 18.2.0 before running npm run dev.

[NzakiCodes]

If you are getting an error like Invalid hook call or similar when running npm create @shopify/hydrogen/latest, there is probably a React version mismatch in the CLI dependencies.

This is something that should be fix in Hydrogen and Shopify CLI but, in the meantime, you can try doing one of the following:

npm create @shopify/hydrogen@latest --legacy-peer-deps --cache ~/randomDir

This avoids installing peer dependencies, thus reducing the chance of getting multiple versions of React. Provide a random cache directory to avoid reusing preinstalled CLI versions in your global cache that don't use --legacy-peer-deps. Alternatively, you can run npm clean cache --force before installing it instead.

Once the project is created, ensure your React dependencies react and react-dom are pinned to 18.2.0 before running npm run dev.

npm cache clean --force

[jamalsoueidan]

Is the HMR fix inside this?

[frandiox]

No, this fix is not related to HMR

[dvnrsn]

Edit: I wonder if I am being successful but the CLI is now confused #2133

---

I've had this issue for a while and tried many iterations to fix the peer dependency

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-reconciler@0.29.2

The thing that gets me the closest is

npm cache clean --force
# delete node_modules and package-lock
npm install --legacy-peer-deps

This seems to fix the dependency problems but then I am left with the fun warning

Looks like you're trying to run a Hydrogen command outside of a Hydrogen project. 
Run `shopify hydrogen init` to create a new Hydrogen project. 

Deleting package-lock and running npm i gets me back to where I started.

Any ideas of what else I can try to fix my dependency hell?