Hydrogen framework error: Something's wrong here

[sudhaarora]

After Hydrogen framework installation with react run command “npm run dev” getting error:

using OS: Ubuntu

in browser : "Something’s wrong here…

in command line prompt: Add the showQueryTiming property to your Hydrogen configuration to see more information

even i have try to added showQueryTiming: true, in hydrogen.config.js file but not resolved. please help here.

[brendan-widmer]

I can’t offer support, just here to say I am facing the same problem. I’ve been trying to follow along with the hydrogen tutorial here and when I get to the product page section here I am getting the same error. The console has a lot to say about the error, none of which I understand:

(EDIT for clarification - it’s specifically when importing the ProductDetails.client.jsx component into the [handle].server.jsx route - all fine up to then)

Uncaught Error: Router hooks and  component must be used within a

[mingyeungs]

Encountered the same issue, and fixed it by upgrading Node.js to 16.17.0 (LTS)

Meanwhile the message “Add the showQueryTiming property…” appears to be a helper message following each <Suspense />

[sudhaarora]

Hi Mingyeungs, thanks for your response.

i have try to change with node version but still getting same issue. in console it show vite connect close

[sudhaarora]

My vite.config.js file is look like this :

[adic26]

Also on v16.17.0

➜  hydrogen-test-app node -v
v16.17.0

I still cannot seem to find a solution on how to get the ProductDetails.client.jsx to work. It seems that there is no error on node side but on react side:

Uncaught Error: Could not find client component ProductDetails-LTEzMzg4NTkwNTc
    at importClientComponent (:3000/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=12dba7e6:90:17)
    at preloadModule (:3000/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=12dba7e6:124:17)
    at resolveModule (:3000/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=12dba7e6:445:3)
    at processFullRow (:3000/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=12dba7e6:503:9)
    at processBinaryChunk (:3000/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=12dba7e6:553:5)
    at progress (:3000/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=12dba7e6:606:5)

Any help would be appreciated please.

[TransonQ]

I am facing the same problem.

Node: v16.17.1

Uncaught Error: Router hooks and component must be used within a component.

“@shopify/hydrogen”: “^1.4.2”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”

[sweetdreamers]

I fixed the errors by removing the ‘default’

export default function ProductDetails({ product })

so it becomes

export function ProductDetails({ product }) {

Hope that works for you!

[anaesthesia]

Hi. I’m experiencing the same error. Unfortunately none of the above solutions didn’t help. Hydrogen tutorial course users report same issue. Have you found anything so far?

[anaesthesia]

Hi. Did you manage to find a solution? I have the same and apparently other hydrogen+shopify devs: https://github.com/Shopify/hydrogen/issues/2090

[TransonQ]

solved. my vite.config.js

[anaesthesia]

Thanks. My config is the same, but the issue pursues unfortunately.

[Kobiljon]

Hi there. Could you please tell where did you find this solution? Because I wanted to know what this code does. Thanks!

[TawsifHaque]

this can be fixed. it’s an issue with npm itself.

use yarn to run the hydrogen project.

yarn dev --force

[SleazyROM]

This issue is more than likely caused by outdated node versions, The current setup in 2024/25 is node 20+, upgrade your installed version and it’ll be fine. If you can’t at the system level, use nvm to manage the node version at the user level.