Unable to Run Hydrogen App Using npx shopify hydrogen dev - Error Related to ES Modules

Unable to Run Hydrogen App Using npx shopify hydrogen dev - Error Related to ES Modules

HiteshW3nuts
Shopify Partner
1 0 0

 

Hi there,

I’m encountering an issue when trying to run my Hydrogen app using npx shopify hydrogen dev. The app works perfectly when I use npm run dev, but when I try to run it using npx shopify hydrogen dev or deploy it using shopify hydrogen deploy, I receive the following error:

 

 Directory import 'C:\xampp\htdocs\macian\node_modules\vite' is not supported resolving ES modules imported from C:\xampp\htdocs\macian\node_modules\@shopify\cli\dist\chunk-POBZPEHK.js Did you mean to import C:/xampp/htdocs/macian/node_modules/vite/dist/node/index.js? 

h2_error.png

I also tried running shopify hydrogen deploy, but the same error persists.

Here’s my package.json for reference:

 

 
{
"name": "macian",
"description": "Demo store template for @shopify/hydrogen",
"version": "0.0.0",
"license": "MIT",
"private": true,
"scripts": {
"dev": "vite",
"lint": "npm-run-all lint:*",
"lint:js": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx src",
"lint:css": "stylelint ./src/**/*.{css,sass,scss}",
"build": "yarn build:client && yarn build:server && yarn build:worker",
"build:client": "vite build --outDir dist/client --manifest",
"build:server": "vite build --outDir dist/server --ssr @shopify/hydrogen/platforms/node",
"build:worker": "cross-env WORKER=true vite build --outDir dist/worker --ssr @shopify/hydrogen/platforms/worker-event",
"start": "node --enable-source-maps dist/server",
"serve": "node --enable-source-maps dist/server",
"preview": "npx @shopify/hydrogen-cli@latest preview"
},
"devDependencies": {
"@shopify/cli": "^3.0.11",
"@shopify/cli-hydrogen": "^3.0.11",
"@shopify/prettier-config": "^1.1.2",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.2",
"@types/swiper": "^6.0.0",
"eslint": "^8.18.0",
"eslint-plugin-hydrogen": "^0.12.2",
"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.18",
"vitest": "^0.15.2"
},
"prettier": "@shopify/prettier-config",
"dependencies": {
"@barba/core": "^2.9.7",
"@headlessui/react": "^1.6.4",
"@heroicons/react": "^1.0.6",
"@shopify/hydrogen": "^1.6.1",
"@splidejs/react-splide": "^0.7.10",
"@thebeyondgroup/shopify-rich-text-renderer": "^2.0.3",
"axios": "^0.27.2",
"clsx": "^1.1.1",
"cross-env": "^7.0.3",
"graphql-tag": "^2.12.6",
"gsap": "^3.10.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-google-recaptcha": "^3.1.0",
"react-image-zoom-pan": "^0.3.1",
"react-lazy-load": "^4.0.1",
"react-scroll-trigger": "^0.6.14",
"react-slick": "^0.29.0",
"react-use": "^17.4.0",
"react-zoom-pan-pinch": "^2.1.3",
"title": "^3.4.4",
"typographic-base": "^1.0.4"
},
"engines": {
"node": "18.7.0",
"npm": "8.12.1"
}
}

Has anyone encountered this issue or have any insights into what might be causing it? I would really appreciate any help or suggestions!

Thanks in advance!

 

Replies 0 (0)