React: npm start - windows cannot find localhost

Question

I am trying to follow tutorials for basic react-build-app.

ENVIRONMENT

I am using Ubuntu on Windows 10.

Node version: v13.3.0

NPM version: 6.13.1

So far I did,

npm install -g create-react-app

create-react-app calculator

cd calculator

npm start

PROBLEM

When I run npm start, I get pop up dialog from windows saying, Windows cannot find '\https://localhost:3000/\'. Make sure you typed the name correctly, and then try again. Here is a screenshot of the error

However, in the cli, I see

 Local:            http://localhost:3000/
 On Your Network:  http://192.168.56.1:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.```

But when I open my browser and go to http://localhost:3000/, I only see a blank page, and not the normal React logo.

EXPECTED OUTPUT

I should see the react logo when going to http://localhost:3000/, and not receive and error.

ATTEMPTS

• Updated nodejs and npm.
• Changed ports using package.json. Also tried using .env file to change port. Same error.
• Uninstalled and re-installed ubuntu 18.04 LTS and used NVM to install nodejs and npm.

WORKAROUND I got tired of fixing error after error with linux, so I just set up npm and nodejs on windows instead. ran create-react-app on windows cli and it worked the first time. Told me something else was listening on the port i was trying to open, so prompted me to change port. I said yes. Now I get the landing page I was looking for.

I am very new at this and have been trying to figure this out for a couple days now, I would appreciate any advice. Thank you.

Answer 1

This is a WSL specific issue with one of the dependencies of react-scripts, more specifically open version 7.0.0.

To resolve, you can:

• switch to react-scripts 3.2.0 in your package.json, or
• run npm start from something else than WSL (e.g. Powershell), or
• wait for open and react to fix the issue

Bug report in React Scripts:
https://github.com/facebook/create-react-app/issues/8081

And the corresponding bug report in open:
https://github.com/sindresorhus/open/issues/154

Answer 2

According to this post in the bug report in open the culprit is lines 76 & 77 of index.js in node_modules/open. If you comment them out then it works fine.

Link to comment: https://github.com/sindresorhus/open/issues/154#issuecomment-562509596