Hey there, I’m new to Hydrogen and Shopify in general.
Im trying to create the mock-up store using :
npm create @shopify/hydrogen@latest
or even
npm create @shopify/hydrogen@latest – --quickstart
But whenever I try to run it for the first time, I get the same error,
I tried to solve it but I really have no clue what’s going on here:
Error during module fetch: Error: Failed to load url /Users/ziveliyahu/Desktop/Ziv/Coding%20projects/HydrogenTest/newTest/hydrogen-quickstart/node_modules/@shopify/hydrogen/dist/vite/virtual-routes/layout.jsx (resolved id: /Users/ziveliyahu/Desktop/Ziv/Coding%20projects/HydrogenTest/newTest/hydrogen-quickstart/node_modules/@shopify/hydrogen/dist/vite/virtual-routes/layout.jsx) in virtual:remix/server-build. Does the file exist?
at loadAndTransform (file:///Users/ziveliyahu/Desktop/Ziv/Coding%20projects/HydrogenTest/newTest/hydrogen-quickstart/node_modules/vite/dist/node/chunks/dep-Pj_jxEzN.js:41317:17) {
code: ‘ERR_LOAD_URL’
}
╭─ error ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ MiniOxygen encountered an error while running your app’s entry point: │
│ │
│ SyntaxError: Unexpected token ‘I’, “Internal s”… is not valid JSON │
│ │
│ To investigate the issue, examine this stack trace: │
│ at (server.js:5) │
│
Hi! Does the /Users/ziveliyahu/Desktop/Ziv/Coding%20projects/HydrogenTest/newTest/hydrogen-quickstart/node_modules/@shopify/hydrogen/dist/vite/virtual-routes/layout.jsx really doesn’t exist? Can you try running npm install and npm run dev after that?
Thank you. MacOS 15.3.2 (24D81). Node v22.14.0. It should be fine as far as I can see.
I always get a message of an update available after I install the @shopify/hydrogen with: npm create @shopify/hydrogen@latest -- --quickstart
But even after I update, I get the same message ):
Hi, do you remember how did you install node? I wonder if it is a file permission issue (it seems node can not access files inside node_modules?). Do you use node/npm in other projects?
I think through the official site. It’s been a while, never had problems. I use node/npm for all other projects. So I think it should be none related. I have also checked antivirus /firewall problems and stuff but seems to be fine.
I ran into an issue similar to this awhile ago. I couldn’t remember what I did to fix it so I went back in my AI logs and found some things you can try. Just not sure if this is the same issue I had.
1. Verify Node.js Version: Ensure you’re using a compatible version of Node.js. Hydrogen requires Node.js version 16.2 or higher. You can check your current version with:
node -v
If your version is older than 16.2, consider updating Node.js.
2. Clean Installation: Sometimes, residual files can cause conflicts. To ensure a clean setup:
Delete the existing project directory.
Clear the npm cache:
npm cache clean --force
Recreate the project:
npm create @shopify/hydrogen@latest
3. Address React Version Mismatch: A mismatch between React versions can lead to errors. To handle this:
Use the --legacy-peer-deps flag during installation:GitHub
If issues persist, manually install compatible React versions:
npm install react@18 react-dom@18
This approach has been discussed in the Shopify Community:
4. Check File Permissions: Ensure that your user account has the necessary permissions for the project directory and its subdirectories. On macOS, you can adjust permissions using:
5. Seek Further Assistance: If the above steps don’t resolve the issue, consider reaching out to the Shopify Community or checking existing discussions for similar problems:
Remember to provide detailed information about your operating system, Node.js version, and any error messages when seeking help. This will assist others in diagnosing and resolving the issue more effectively.
Hey Balint, this solution works, but may what is the permanent fix around it
? I want to keep the project in a structured way. My folders names usually have spaces in it
