[bug]: Unable to start the development server

[tiziano-seguida]

Describe the bug

After i've created a new project when run yarn run watch in root folder, i get the following error in console:

FetchError: Invalid response body while trying to fetch https://magento.test/graphql: read ECONNRESET
    at Gunzip.<anonymous> (pwa-studio/packages/magento-storefront/node_modules/@magento/pwa-buildpack/node_modules/node-fetch/lib/index.js:400:12)
    at Gunzip.emit (node:events:525:35)
    at emitErrorNT (node:internal/streams/destroy:157:8)
    at emitErrorCloseNT (node:internal/streams/destroy:122:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  type: 'system',
  errno: 'ECONNRESET',
  code: 'ECONNRESET'
}
FetchError: Invalid response body while trying to fetch https://magento.test/graphql: read ECONNRESET
    at Gunzip.<anonymous> (pwa-studio/packages/magento-storefront/node_modules/@magento/pwa-buildpack/node_modules/node-fetch/lib/index.js:400:12)
    at Gunzip.emit (node:events:525:35)
    at emitErrorNT (node:internal/streams/destroy:157:8)
    at emitErrorCloseNT (node:internal/streams/destroy:122:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)

To reproduce

➜ packages git:(develop) ✗ yarn create @magento/pwa

yarn create v1.22.21

[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...

warning "@magento/create-pwa > @magento/[email protected]" has unmet peer dependency "@babel/core@~7.15.0".
warning "@magento/create-pwa > @magento/[email protected]" has unmet peer dependency "@babel/plugin-syntax-jsx@~7.2.0".
warning "@magento/create-pwa > @magento/[email protected]" has unmet peer dependency "babel-loader@~8.0.5".
warning "@magento/create-pwa > @magento/[email protected]" has unmet peer dependency "css-loader@~5.2.7".
warning "@magento/create-pwa > @magento/[email protected]" has unmet peer dependency "postcss@~8.3.6".
warning "@magento/create-pwa > @magento/[email protected]" has unmet peer dependency "postcss-loader@~4.3.0".
warning "@magento/create-pwa > @magento/[email protected]" has unmet peer dependency "terser-webpack-plugin@~1.2.3".
warning "@magento/create-pwa > @magento/[email protected]" has unmet peer dependency "workbox-webpack-plugin@~6.2.4".
warning "@magento/create-pwa > @magento/pwa-buildpack > @magento/[email protected]" has unmet peer dependency "express@^4.16.4".
warning "@magento/create-pwa > @magento/pwa-buildpack > @pmmmwh/[email protected]" has unmet peer dependency "react-refresh@>=0.8.3 <0.10.0".
warning "@magento/create-pwa > @magento/pwa-buildpack > [email protected]" has unmet peer dependency "express@^4.16.2".
warning "@magento/create-pwa > @magento/pwa-buildpack > [email protected]" has unmet peer dependency "sharp@>=0.25.4".

[4/4] 🔨 Building fresh packages...

success Installed "@magento/[email protected]" with binaries:
- create-pwa
@magento/create-pwa v2.4.5
Creating a PWA Studio project
? Project root directory (will be created if it does not exist) magento-storefront
? Short name of the project to put in the package.json "name" field magento-storefront
? Name of the author to put in the package.json "author" field Tiziano Seguida [email protected]
? Which template would you like to use to bootstrap magento-storefront? Defaults to "@magento/venia-concept". @magento/venia-concept
? Magento instance to use as a backend (will be added to .env file) Other
? URL of a Magento instance to use as a backend (will be added to .env file) https://magento.test
? Edition of the magento store (Adobe Commerce or Magento Open Source) CE
? Braintree API token to use to communicate with your Braintree instance (will be added to .env file) sandbox_8yrzsvtm_s2bg8fs563crhqzk
? NPM package management client to use yarn
? Install package dependencies with yarn after creating project No

Running command:

buildpack create-project magento-storefront --name "magento-storefront" --author "Tiziano Seguida [email protected]" --template "@magento/venia-concept" --backend-url "https://magento.test" --backend-edition "CE" --braintree-token "sandbox_8yrzsvtm_s2bg8fs563crhqzk" --npm-client "yarn" --no-install

ℹ Found @magento/venia-concept template in cache
ℹ Creating a new PWA project 'magento-storefront' in magento-storefront
⚠ Created new PWA project magento-storefront. Next steps:

 - cd magento-storefront && yarn install before running the below commands.

 - yarn run buildpack create-custom-origin . to generate a unique, secure custom domain for your new project. Highly recommended.

 - yarn run watch to start the dev server and do real-time development.

 - yarn run storybook to start Storybook dev server and view available components in your app.

 - yarn run build to build the project into optimized assets in the '/dist' directory.

 - yarn start after build to preview the app on a local staging server.

ℹ Successfully wrote a fresh configuration file to pwa-studio/packages/magento-storefront/.env

✨ Done in 71.90s.

yarn install v1.22.21
info No lockfile found.
[1/5] 🔍 Validating package.json...
[2/5] 🔍 Resolving packages...
warning @magento/pwa-buildpack > [email protected]: critical regex denial of service bug fixed in 1.2.1 patch
warning @magento/pwa-buildpack > jsdom > [email protected]: Use your platform's native atob() and btoa() methods instead
warning @magento/pwa-buildpack > jsdom > data-urls > [email protected]: Use your platform's native atob() and btoa() methods instead
warning @magento/pwa-buildpack > jsdom > [email protected]: Use your platform's native performance.now() and performance.timeOrigin.
warning @magento/pwa-buildpack > jsdom > [email protected]: Use your platform's native DOMException instead
warning @magento/pwa-buildpack > @magento/upward-js > hogan.js > [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
warning @magento/pwa-buildpack > @pmmmwh/react-refresh-webpack-plugin > native-url > [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning @magento/pwa-buildpack > copy-webpack-plugin > cacache > @npmcli/[email protected]: This functionality has been moved to @npmcli/fs
warning @magento/pwa-buildpack > @magento/upward-js > http-proxy-middleware > micromatch > snapdragon > [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
warning @magento/pwa-buildpack > @magento/upward-js > http-proxy-middleware > micromatch > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning @magento/pwa-buildpack > @magento/upward-js > http-proxy-middleware > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning @magento/pwa-buildpack > @magento/upward-js > http-proxy-middleware > micromatch > snapdragon > source-map-resolve > [email protected]: See https://github.com/lydell/source-map-url#deprecated
warning @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
warning @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
warning @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
warning @babel/preset-env > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
warning @babel/preset-env > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
warning @babel/preset-env > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
warning @babel/preset-env > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-dynamic-import instead.
warning @babel/preset-env > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-static-block instead.
warning @babel/preset-env > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-logical-assignment-operators instead.
warning @babel/preset-env > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-export-namespace-from instead.
warning @babel/preset-env > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
warning @babel/preset-env > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
warning @babel/preset-env > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.
warning @babel/preset-env > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-json-strings instead.
warning @babel/preset-env > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.
warning @babel/preset-env > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-unicode-property-regex instead.
warning @babel/preset-env > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
warning @babel/preset-env > @babel/preset-modules > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-unicode-property-regex instead.
warning @babel/preset-env > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.
warning @storybook/react > @storybook/core-common > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
warning @storybook/react > @storybook/core-common > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
warning @storybook/react > @storybook/core-common > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
warning @storybook/react > @storybook/core-common > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
warning @storybook/react > @storybook/core-common > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
warning @storybook/react > @storybook/core-common > fork-ts-checker-webpack-plugin > [email protected]: this will be v4
warning @storybook/react > @storybook/core > @storybook/core-server > @storybook/builder-webpack4 > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
warning @storybook/react > @storybook/core > @storybook/core-server > @storybook/builder-webpack4 > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
warning @storybook/react > @storybook/core > @storybook/core-server > @storybook/builder-webpack4 > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
warning @storybook/react > @storybook/core > @storybook/core-server > @storybook/builder-webpack4 > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
warning @storybook/react > @storybook/core > @storybook/core-server > @storybook/builder-webpack4 > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
warning @storybook/react > webpack > terser-webpack-plugin > cacache > [email protected]: This module is no longer supported.
warning @storybook/react > webpack > terser-webpack-plugin > cacache > ssri > [email protected]: This module is no longer supported.
warning @storybook/react > webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
warning @storybook/react > webpack > watchpack > watchpack-chokidar2 > chokidar > [email protected]: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
warning @storybook/react > @storybook/core > @storybook/core-server > @storybook/builder-webpack4 > [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
warning @storybook/react > @storybook/core > @storybook/core-client > @storybook/client-api > [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
warning @storybook/react > @storybook/core > @storybook/core-server > @storybook/manager-webpack4 > webpack-dev-middleware > webpack-log > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning @storybook/react > @storybook/core > @storybook/core-server > @storybook/csf-tools > @mdx-js/mdx > remark-mdx > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
warning @storybook/react > @storybook/core > @storybook/core-server > @storybook/csf-tools > @mdx-js/mdx > remark-parse > [email protected]: Use String.prototype.trim() instead
warning [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
warning eslint-plugin-graphql > graphql-config > @graphql-tools/url-loader > [email protected]: The subscriptions-transport-ws package is no longer maintained. We recommend you use graphql-ws instead. For help migrating Apollo software to graphql-ws, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws For general help using graphql-ws, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
warning react-router-dom > react-router > [email protected]: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
warning [email protected]: The subscriptions-transport-ws package is no longer maintained. We recommend you use graphql-ws instead. For help migrating Apollo software to graphql-ws, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws For general help using graphql-ws, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
warning terser-webpack-plugin > cacache > [email protected]: This module is no longer supported.
warning webpack-dev-server > [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
warning webpack-dev-server > sockjs > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning workbox-webpack-plugin > [email protected]: See https://github.com/lydell/source-map-url#deprecated
warning workbox-webpack-plugin > workbox-build > [email protected]: See https://github.com/lydell/source-map-url#deprecated
warning workbox-webpack-plugin > workbox-build > [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
warning workbox-webpack-plugin > workbox-build > [email protected]: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
warning workbox-webpack-plugin > workbox-build > @surma/rollup-plugin-off-main-thread > magic-string > [email protected]: Please use @jridgewell/sourcemap-codec instead
[3/5] 🚚 Fetching packages...
[4/5] 🔗 Linking dependencies...
warning " > @magento/[email protected]" has unmet peer dependency "eslint-config-prettier@^6.0.0".
warning " > @magento/[email protected]" has incorrect peer dependency "@magento/venia-ui@~10.2.0".
warning "@storybook/react > @storybook/[email protected]" has unmet peer dependency "typescript@>= 3.x".
warning "@storybook/react > @storybook/core-common > [email protected]" has unmet peer dependency "typescript@>= 2.7".
warning "@storybook/react > @storybook/react-docgen-typescript-plugin > [email protected]" has unmet peer dependency "typescript@>= 4.3.x".
warning "@storybook/react > @storybook/addons > @storybook/router > @reach/[email protected]" has incorrect peer dependency "[email protected] || 16.x || 16.4.0-alpha.0911da3".
warning "@storybook/react > @storybook/addons > @storybook/router > @reach/[email protected]" has incorrect peer dependency "[email protected] || 16.x || 16.4.0-alpha.0911da3".
warning "@storybook/react > @storybook/addons > @storybook/router > @reach/router > [email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0".
warning "eslint-plugin-graphql > graphql-config > @endemolshinegroup/cosmiconfig-typescript-loader > [email protected]" has unmet peer dependency "typescript@>=2.7".
warning " > [email protected]" has unmet peer dependency "autoprefixer@^10.0.2".
[5/5] 🔨 Building fresh packages...
success Saved lockfile.

yarn buildpack create-custom-origin .

yarn run v1.22.21
$ buildpack create-custom-origin .
Creating a local development domain requires temporary administrative privileges.
Please enter the password for #### hidden field #### on #### hidden field #### .
Password: #### hidden field ####

ℹ Acquired custom hostname and SSL cert for magento-storefront-tdicm.local.pwadev. Development server will run on port 8220 and staging server will run on port 9220.
✨ Done in 10.90s.

Expected behavior

The development server started

Debug Report

ℹ Inspecting Dependencies
Found 9 @magento dependencies in yarn.lock
@magento/pwa-buildpack @ 11.4.3
@adobe/apollo-link-mutation-queue @ 1.0.2
@magento/babel-preset-peregrine @ 1.2.3
@magento/eslint-config @ 1.5.3
@magento/pagebuilder @ 8.2.1
@magento/peregrine @ 13.2.1
@magento/pwa-theme-venia @ 1.4.0
@magento/upward-security-headers @ 1.0.14
@magento/venia-ui @ 10.3.0

ℹ Inspecting Magento Backend
Not using sample backend.
Backend is UP!

ℹ Inspecting System
OS: Darwin Kernel Version 22.6.0: Wed Oct 4 21:25:40 PDT 2023; root:xnu-8796.141.3.701.17~4/RELEASE_ARM64_T8103
Node Version: v16.20.2
NPM Version: 8.19.4

Please complete the following device information:

• Device: Mac
• Browser: Chrome
• Browser Version: Version 121.0.6167.160 (Official Build) (arm64)
• Magento Version: 2.4.6-p3 CE

Please let us know what packages this bug is in regards to:

• venia-concept
• venia-ui
• pwa-buildpack
• peregrine
• pwa-devdocs
• upward-js
• upward-spec
• create-pwa

[m2-assistant]

Hi @tiziano-seguida. Thank you for your report.
To speed up processing of this issue, make sure that you provided sufficient information.
Add a comment to assign the issue: @magento I am working on this

---

Join Magento Community Engineering Slack and ask your questions in #github channel.

[glo82145]

@adobe export issue to Jira project PWA

[github-jira-sync-bot]

✅ Jira issue https://jira.corp.adobe.com/browse/PWA-3274 is successfully created for this GitHub issue.

[glo85315]

Hi @tiziano-seguida ,

PWA-3274.mov

Thank you for bringing this issue to our attention. We’ve thoroughly investigated and attempted to reproduce the problem you described, but unfortunately, we were unable to replicate the issue on our end.

[glo82145]

As we have no update on this ticket for more than 14 days hence we are closing this ticket.
Please feel free to reopen in case of any update.