[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/pwa-buildpack@11.4.3" has unmet peer dependency "@babel/core@~7.15.0".
warning "@magento/create-pwa > @magento/pwa-buildpack@11.4.3" has unmet peer dependency "@babel/plugin-syntax-jsx@~7.2.0".
warning "@magento/create-pwa > @magento/pwa-buildpack@11.4.3" has unmet peer dependency "babel-loader@~8.0.5".
warning "@magento/create-pwa > @magento/pwa-buildpack@11.4.3" has unmet peer dependency "css-loader@~5.2.7".
warning "@magento/create-pwa > @magento/pwa-buildpack@11.4.3" has unmet peer dependency "postcss@~8.3.6".
warning "@magento/create-pwa > @magento/pwa-buildpack@11.4.3" has unmet peer dependency "postcss-loader@~4.3.0".
warning "@magento/create-pwa > @magento/pwa-buildpack@11.4.3" has unmet peer dependency "terser-webpack-plugin@~1.2.3".
warning "@magento/create-pwa > @magento/pwa-buildpack@11.4.3" has unmet peer dependency "workbox-webpack-plugin@~6.2.4".
warning "@magento/create-pwa > @magento/pwa-buildpack > @magento/upward-js@5.3.2" has unmet peer dependency "express@^4.16.4".
warning "@magento/create-pwa > @magento/pwa-buildpack > @pmmmwh/react-refresh-webpack-plugin@0.4.3" has unmet peer dependency "react-refresh@>=0.8.3 <0.10.0".
warning "@magento/create-pwa > @magento/pwa-buildpack > graphql-playground-middleware-express@1.7.23" has unmet peer dependency "express@^4.16.2".
warning "@magento/create-pwa > @magento/pwa-buildpack > hastily@0.5.0" has unmet peer dependency "sharp@>=0.25.4".

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

success Installed "@magento/create-pwa@2.4.5" 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 myemail@hidden.com
? 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 myemail@hidden.com" --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 > devcert@1.1.3: critical regex denial of service bug fixed in 1.2.1 patch
warning @magento/pwa-buildpack > jsdom > abab@2.0.6: Use your platform's native atob() and btoa() methods instead
warning @magento/pwa-buildpack > jsdom > data-urls > abab@2.0.6: Use your platform's native atob() and btoa() methods instead
warning @magento/pwa-buildpack > jsdom > w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
warning @magento/pwa-buildpack > jsdom > domexception@2.0.1: Use your platform's native DOMException instead
warning @magento/pwa-buildpack > @magento/upward-js > hogan.js > mkdirp@0.3.0: 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 > querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning @magento/pwa-buildpack > copy-webpack-plugin > cacache > @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
warning @magento/pwa-buildpack > @magento/upward-js > http-proxy-middleware > micromatch > snapdragon > source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
warning @magento/pwa-buildpack > @magento/upward-js > http-proxy-middleware > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning @magento/pwa-buildpack > @magento/upward-js > http-proxy-middleware > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning @magento/pwa-buildpack > @magento/upward-js > http-proxy-middleware > micromatch > snapdragon > source-map-resolve > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
warning @babel/plugin-proposal-class-properties@7.14.5: 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/plugin-proposal-object-rest-spread@7.14.7: 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/plugin-proposal-optional-chaining@7.16.7: 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/plugin-proposal-class-properties@7.18.6: 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/plugin-proposal-object-rest-spread@7.20.7: 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/plugin-proposal-optional-chaining@7.21.0: 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/plugin-proposal-dynamic-import@7.18.6: 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/plugin-proposal-class-static-block@7.21.0: 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/plugin-proposal-logical-assignment-operators@7.20.7: 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/plugin-proposal-export-namespace-from@7.18.9: 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/plugin-proposal-private-methods@7.18.6: 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/plugin-proposal-numeric-separator@7.18.6: 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/plugin-proposal-private-property-in-object@7.21.11: 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/plugin-proposal-json-strings@7.18.6: 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/plugin-proposal-optional-catch-binding@7.18.6: 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/plugin-proposal-unicode-property-regex@7.18.6: 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/plugin-proposal-nullish-coalescing-operator@7.18.6: 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/plugin-proposal-unicode-property-regex@7.18.6: 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/plugin-proposal-async-generator-functions@7.20.7: 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/plugin-proposal-class-properties@7.18.6: 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/plugin-proposal-nullish-coalescing-operator@7.18.6: 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/plugin-proposal-object-rest-spread@7.20.7: 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/plugin-proposal-optional-chaining@7.21.0: 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/plugin-proposal-private-methods@7.18.6: 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 > memfs@3.6.0: this will be v4
warning @storybook/react > @storybook/core > @storybook/core-server > @storybook/builder-webpack4 > @babel/plugin-proposal-class-properties@7.18.6: 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/plugin-proposal-nullish-coalescing-operator@7.18.6: 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/plugin-proposal-object-rest-spread@7.20.7: 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/plugin-proposal-optional-chaining@7.21.0: 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/plugin-proposal-private-methods@7.18.6: 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 > figgy-pudding@3.5.2: This module is no longer supported.
warning @storybook/react > webpack > terser-webpack-plugin > cacache > ssri > figgy-pudding@3.5.2: This module is no longer supported.
warning @storybook/react > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: 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 > fsevents@1.2.13: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
warning @storybook/react > @storybook/core > @storybook/core-server > @storybook/builder-webpack4 > stable@0.1.8: 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 > stable@0.1.8: 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 > uuid@3.4.0: 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/plugin-proposal-object-rest-spread@7.12.1: 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 > trim@0.0.1: Use String.prototype.trim() instead
warning babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
warning eslint-plugin-graphql > graphql-config > @graphql-tools/url-loader > subscriptions-transport-ws@0.9.19: 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 > mini-create-react-context@0.4.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
warning subscriptions-transport-ws@0.9.19: 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 > figgy-pudding@3.5.2: This module is no longer supported.
warning webpack-dev-server > chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
warning webpack-dev-server > sockjs > uuid@3.4.0: 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 > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
warning workbox-webpack-plugin > workbox-build > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
warning workbox-webpack-plugin > workbox-build > rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
warning workbox-webpack-plugin > workbox-build > workbox-google-analytics@6.2.4: 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 > sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
[3/5] 🚚 Fetching packages...
[4/5] 🔗 Linking dependencies...
warning " > @magento/eslint-config@1.5.3" has unmet peer dependency "eslint-config-prettier@^6.0.0".
warning " > @magento/upward-security-headers@1.0.14" has incorrect peer dependency "@magento/venia-ui@~10.2.0".
warning "@storybook/react > @storybook/react-docgen-typescript-plugin@1.0.2-canary.253f8c1.0" has unmet peer dependency "typescript@>= 3.x".
warning "@storybook/react > @storybook/core-common > fork-ts-checker-webpack-plugin@6.5.3" has unmet peer dependency "typescript@>= 2.7".
warning "@storybook/react > @storybook/react-docgen-typescript-plugin > react-docgen-typescript@2.2.2" has unmet peer dependency "typescript@>= 4.3.x".
warning "@storybook/react > @storybook/addons > @storybook/router > @reach/router@1.3.4" has incorrect peer dependency "react@15.x || 16.x || 16.4.0-alpha.0911da3".
warning "@storybook/react > @storybook/addons > @storybook/router > @reach/router@1.3.4" has incorrect peer dependency "react-dom@15.x || 16.x || 16.4.0-alpha.0911da3".
warning "@storybook/react > @storybook/addons > @storybook/router > @reach/router > create-react-context@0.3.0" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0".
warning "eslint-plugin-graphql > graphql-config > @endemolshinegroup/cosmiconfig-typescript-loader > ts-node@9.1.1" has unmet peer dependency "typescript@>=2.7".
warning " > tailwindcss@2.2.19" 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.