Win NAT locking port 3000 stops "yarn dev" command running successfully

[rossparachute]

Provide environment information

v14.19.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

yarn dev

Describe the Bug

This bug report contains a fix that may help others who run into the same issue.

When booting the GraphCommerce demo app from a clean pull of the repo a required listener on port 3000 cannot be subscribed to. This appears to be due to the Windows NAT programme locking port 3000.

Fix
Stopping and restarting the Win NAT service appears to resolve the issue.

net stop winnat
net start winnat

Then run:
yarn dev

Error Output
Running the "yarn dev" command from the root dir of the GraphCommerce demo project results in the below output:

magento-graphcms> yarn dev
yarn run v1.22.5
warning ..\..\..\package.json: No license field
$ yarn concurrently -k -n codegen,next "yarn codegen-base -w" "yarn next dev"
warning ..\..\..\package.json: No license field
$ C:\dev\react\graphcommerce-magento-demo\magento-graphcms\node_modules\.bin\concurrently -k -n codegen,next "yarn codegen-base -w" "yarn next dev"
warning ..\..\..\package.json: No license field
warning ..\..\..\package.json: No license field
$ yarn graphql-codegen -w
$ C:\dev\react\graphcommerce-magento-demo\magento-graphcms\node_modules\.bin\next dev
[next] Error: listen EACCES: permission denied 0.0.0.0:3000
[next]     at Server.setupListenHandle [as _listen2] (net.js:1314:21)
[next]     at listenInCluster (net.js:1379:12)
[next]     at Server.listen (net.js:1465:7)
[next]     at C:\dev\react\graphcommerce-magento-demo\magento-graphcms\node_modules\next\dist\server\lib\start-server.js:45:16
[next]     at new Promise (<anonymous>)
[next]     at Object.startServer (C:\dev\react\graphcommerce-magento-demo\magento-graphcms\node_modules\next\dist\server\lib\start-server.js:19:12)
[next]     at nextDev (C:\dev\react\graphcommerce-magento-demo\magento-graphcms\node_modules\next\dist\cli\next-dev.js:114:23)
[next]     at C:\dev\react\graphcommerce-magento-demo\magento-graphcms\node_modules\next\dist\bin\next:141:34 {
[next]   code: 'EACCES',
[next]   errno: -4092,
[next]   syscall: 'listen',
[next]   address: '0.0.0.0',
[next]   port: 3000
[next] }
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
[next] yarn next dev exited with code 1
--> Sending SIGTERM to other processes..
warning ..\..\..\package.json: No license field
$ C:\dev\react\graphcommerce-magento-demo\magento-graphcms\node_modules\.bin\graphql-codegen -w
[codegen] yarn codegen-base -w exited with code 1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Expected Behavior

The GraphCommerce app demo boots with a homepage accessible via:
http://localhost:3000/

To Reproduce

Download the example

git clone git@github.com:graphcommerce-org/graphcommerce.git
mkdir my-project
cp -R graphcommerce/examples/magento-graphcms/. my-project && rm -rf graphcommerce
cd my-project
cp -R .env.example .env
rm CHANGELOG.md
rm -rf node_modules && rm -rf .next

Edit /package.json. Delete "scripts": {...} and rename scripts_local to scripts.

Start the development environment
yarn - Install the dependencies
yarn codegen - Converts all .graphql files to typescript files
yarn dev - Run the app

https://www.graphcommerce.org/docs/getting-started/create#step-1-create-a-new-graphcommerce-app

[paales]

Great to hear that you've found a workaround! I've found a related next.js discussion here vercel/next.js#24536

Anything we can do on the GraphCommerce side to help with this issue?

[rossparachute]

@paales

Thanks for the quick reply.

Hmmm...I appreciate there's a lot of variable edge cases it would be impractical for you guys to handle in the quick-start guide.

Perhaps add it to the troubleshooting build errors? Obviously I understand you might consider this uncommon.
https://www.graphcommerce.org/docs/framework/troubleshooting

Ross

[paales]

In my opinion, having this available here is already valuable and might help the next person encountering it.

@rossparachute Do you know if it only happens once, or happens every time you reboot or something like that?

If someone runs into this issue, please leave a comment. Also check if there isn't another process running on port 3000: https://stackoverflow.com/a/67577618/621617

[rossparachute]

@paales

Here is a perfectly valid place for that info to be, more than fair!

After running start/stop winnat commands I did end up restarting my machine as WSL lost its network connection. Once I'd restarted the WSL had an internet connection again but I was still able to boot the demo app just fine without the error repeating.

I think the winnat stuff gets used by Hyper-V for serving network connections to your containers, WSL etc. I use Docker daily, so that could be a possible culprit. As mentioned, it's all fixable.