How to correctly set up the Shopify App Node Template?

I need to set up my first Shopify App, in order to create a simple Express.js API who can make GraphQL request to modify a custom metafield value from storefront. I'm stuck at the beginning : set up my app dev environment.

Because this is a really simple app project, I've used this Shopify-app-template-node and for now I'm just trying to run npm run dev and going to the app preview page. When I do this, nothing happens on my web browser, but console show many Error forwarding web request: AggregateError errors messages. I would expect to see the application's basic home page instead of this strange error.

How can this problem be solved?

Some additional information:

My web/index.js and web/shopify.js files are currently identical to the repo version
I need to expose three endpoints, but for now I just want to correctly run the basic version of the app
The error Error forwarding web request: AggregateError only appears if I visit the preview page
I tried npm install in the ./, ./web and ./web/frontend directories, and my shopify CLI is in LATEST (@shopify/cli/3.67.1)

Here is the complete log, just after launching npm run dev command :

> mj-wishlist-app@1.0.0 dev
> shopify app dev


╭─ info ─────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                    │
│  Using shopify.app.toml for default values:                                                        │
│                                                                                                    │
│    • Org:             dev                                                                          │
│    • App:             mj-wishlist-app [local]                                                      │
│    • Dev store:       xxxx.myshopify.com                                                           │
│    • Update URLs:     Yes                                                                          │
│                                                                                                    │
│   You can pass  `--reset`  to your command to reset your app configuration.                        │
│                                                                                                    │
╰────────────────────────────────────────────────────────────────────────────────────────────────────╯


15:12:49 │      graphiql │ GraphiQL server started on port 3457
15:12:50 │   web-backend │
15:12:50 │   web-backend │ > shopify-app-template-node@1.0.0 dev
15:12:50 │   web-backend │ > cross-env NODE_ENV=development nodemon index.js --ignore ./frontend
15:12:50 │   web-backend │
15:12:50 │  web-frontend │
15:12:50 │  web-frontend │ > shopify-frontend-template-react@1.0.0 dev
15:12:50 │  web-frontend │ > vite
15:12:50 │  web-frontend │
15:12:51 │  web-frontend │
15:12:51 │  web-frontend │   VITE v5.4.7  ready in 414 ms
15:12:51 │  web-frontend │
15:12:51 │  web-frontend │   ➜  Local:   http://localhost:49717/
15:12:51 │   web-backend │ [nodemon] 2.0.22
15:12:51 │   web-backend │ [nodemon] to restart at any time, enter `rs`
15:12:51 │   web-backend │ [nodemon] watching path(s): *.*
15:12:51 │   web-backend │ [nodemon] watching extensions: js,mjs,json
15:12:51 │   web-backend │ [nodemon] starting `node index.js`
15:12:52 │   web-backend │ [shopify-api/INFO] version 11.4.0, environment Node v20.15.1
15:12:52 │   web-backend │ [shopify-api/INFO] Future flag lineItemBilling is disabled.
15:12:52 │   web-backend │
15:12:52 │   web-backend │   Enable this flag to use the new billing API, that supports multiple line items per plan.
15:12:52 │   web-backend │
15:12:52 │   web-backend │ [shopify-api/INFO] Future flag customerAddressDefaultFix is disabled.
15:12:52 │   web-backend │
15:12:52 │   web-backend │   Enable this flag to change the CustomerAddress classes to expose a 'is_default' property instead of 'default' when fetching
data.
15:12:52 │   web-backend │
15:12:52 │   web-backend │ [shopify-api/INFO] Future flag unstable_managedPricingSupport is disabled.
15:12:52 │   web-backend │
15:12:52 │   web-backend │   Enable this flag to support managed pricing, so apps can check for payments without needing a billing config. Learn more at
https://shopify.dev/docs/apps/launch/billing/managed-pricing
15:12:52 │   web-backend │
15:13:17 │   web-backend │ [shopify-app/INFO] Running ensureInstalledOnShop
15:13:18 │   web-backend │ [shopify-app/INFO] App is installed and ready to load | {shop: xxxxx.myshopify.com}
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError
Error forwarding web request: AggregateError

Solution

This is just a Node version problem, using Node 18.20 solve this error.

Use NVM to change your local Node version :

nvm install 18.20
nvm use 18.20

Then install the Shopify CLI globally :

npm install -g @shopify/cli@latest

After that, you can check CLI and Node version with shopify --version command. For now, I get @shopify/cli/3.67.1 win32-x64 node-v18.20.4 With this version, using npm run dev and accessing the Shopify App Preview perfectly works.