search

Shopify / hydrogen

Hydrogen lets you build faster headless storefronts in less time, on Shopify.
https://hydrogen.shop
MIT License
1.19k stars 241 forks source link

Error on locahost:3000 Hydrogen Storefronts "npm run dev" #2048

Closed HeisUser closed 2 weeks ago

HeisUser commented 2 weeks ago

MacOS 14.4.1 (23E224) Node v22.0.0 npm 10.5.1 @shopify/cli/3.59.1 darwin-x64 node-v22.0.0

After "npm run dev" to running the localhost:300 storefront of Hydrogen, the errors as below :

Screenshot 2024-04-28 at 21 23 30

`$npm run dev

hydrogenstore@1.0.8 dev shopify hydrogen dev --codegen

Environment variables injected into MiniOxygen:

SESSION_SECRET from local .env PUBLIC_STORE_DOMAIN from local .env

➜ Local: http://localhost:3000/ ➜ Network: use --host to expose ➜ press h + enter to show help

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks

  3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. The above error occurred in the component:

    at BoxWithBorder (file:///usr/local/var/www/gitHub/hydrogenstore/node_modules/@shopify/cli-kit/dist/private/node/ui/components/Banner.js:23:26) at Banner (file:///usr/local/var/www/gitHub/hydrogenstore/node_modules/@shopify/cli-kit/dist/private/node/ui/components/Banner.js:61:19) at Alert (file:///usr/local/var/www/gitHub/hydrogenstore/node_modules/@shopify/cli-kit/dist/private/node/ui/components/Alert.js:7:18) at App (file:///usr/local/var/www/gitHub/hydrogenstore/node_modules/ink/build/components/App.js:19:9)

React will try to recreate this component tree from scratch using the error boundary you provided, InternalApp.

ERROR Cannot read properties of null (reading 'useState')

node_modules/@shopify/cli-kit/node_modules/react/cjs/react.development.js:1622:21

1619: } 1620: function useState(initialState) { 1621: var dispatcher = resolveDispatcher(); 1622: return dispatcher.useState(initialState); 1623: } 1624: function useReducer(reducer, initialArg, init) { 1625: var dispatcher = resolveDispatcher();

Originally posted by @HeisUser in https://github.com/Shopify/hydrogen/discussions/2047

michenly commented 2 weeks ago

I was able to reproduce using @shopify/cli@3.59.1 + node v22

michenly commented 2 weeks ago

Link issue https://github.com/Shopify/hydrogen/issues/1833

michenly commented 2 weeks ago

Was able to fix this issue with "@shopify/cli": "3.58.0" and "@shopify/mini-oxygen": 3.0.1" [edit] TIL that the following error in particular is a known issue that should not affect functionalities.

Warning: Could not find ts-node at /usr/local/var/www/gitHub/hydrogenstore/node_modules/@shopify/cli/dist/index-e6f8190d.js. Please ensure that ts-node is a devDependency. Falling back to compiled source.`

Please re-open and let us know if this does not resolved your issue.

HeisUser commented 2 weeks ago

Was able to fix this issue with "@shopify/cli": "3.58.0" and "@shopify/mini-oxygen": 3.0.1"

Please re-open and let us know if this does not resolved your issue.

Noted and thanks for your replied