Cannot access dev server over IPv6

[LoganDark]

Describe the bug

The Webpack dev server does not properly handle IPv6 requests. It responds with Cannot GET /.

Did you try recovering your dependencies?

I don't use multiple package managers

Which terms did you search for in User Guide?

ipv6, ipv4

Environment

Environment Info:

  current version of create-react-app: 4.0.3
  running from /home/logandark/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: Linux 4.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
  Binaries:
    Node: 16.4.0 - ~/.nvm/versions/node/v16.4.0/bin/node
    Yarn: Not Found
    npm: 7.18.1 - ~/.nvm/versions/node/v16.4.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    react-scripts: 4.0.3 => 4.0.3
  npmGlobalPackages:
    create-react-app: Not Found

(WSL 1 on Windows 10 Home 2004 build 19041.928)

Steps to reproduce

1. npm start
2. Try to connect to [::1]:3000
3. Observe Cannot GET /
4. Try to connect to 127.0.0.1:3000 (localhost will no longer work as your browser will try to connect over IPv6)
5. Works

After trying this just once, or perhaps after using localhost normally for a while, your browser will "helpfully" notice that localhost has an IPv6 equivalent, and switch to it permanently, requiring you to explicitly use 127.0.0.1 if you want to actually connect to the server. This will cause development tools to complain about insecure HTTP because they think they are connecting to an external IP address.

Expected behavior

App shows up normally over IPv6

Actual behavior

Cannot GET /

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[LoganDark]

This issue still occurs.

[gadicc]

You can force create-react-app to bind to an ipv6 address like this:

$ HOST=::1 npm start

(to be clear, ::1 is the ipv6 loopback, i.e. localhost)

however, ideally create-react-app should bind to all addresses / IP classes that localhost resolves to.

[gadicc]

I will note that on pure Linux (i.e. not WSL) the issue is slightly different but @LoganDark please let us know if the above helps.

[LoganDark]

You can force create-react-app to bind to an ipv6 address like this:

$ HOST=::1 npm start

(to be clear, ::1 is the ipv6 loopback, i.e. localhost)

however, ideally create-react-app should bind to all addresses / IP classes that localhost resolves to.

It's already binding to both addresses, it's just that the IPv6 address always returns Cannot GET /

I'll try it in a bit

[MikeMcC399]

This issue doesn't seem to have been addressed at all and it is leading to problems now that GitHub has moved the default version of Node.js to 18 (see for instance https://github.com/jeffbski/wait-on/issues/137.)

This would be using create-react-app 5.0.1.

$ npm ls
[email protected] 
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

After setting up cra using npx create-react-app cra on Windows 11 with Node.js 18.14.2 and running npm start

the IPv6 loopback address ::1 does not respond:

$ curl -I http://[::1]:3000
curl: (7) Failed to connect to ::1 port 3000 after 2042 ms: Couldn't connect to server

http://localhost:3000 and http://127.0.0.1:3000 return with HTTP/1.1 200 OK

[lsnnt]

if nothing works then using proxy with nginx works

[LoganDark]

if nothing works then using proxy with nginx works

What do you mean by "using proxy with nginx" - is that an option/flag somewhere now? Or do you mean setting it up manually?

[lsnnt]

@LoganDark you can setup an nginx server with in configuration ports opened to ipv6 and ipv4 and the proxy points to 127.0.0.1:3000; see this

[LoganDark]

@LoganDark you can setup an nginx server with in configuration ports opened to ipv6 and ipv4 and the proxy points to 127.0.0.1:3000; see this

I know what a reverse proxy is. I was just asking if you were talking about a specific setting, or setting up an entire nginx installation just to use this dev server. IMHO I think that's a bit much, but if you run dev servers for a living then I guess it is fine