The development proxy doesn't work with "type": "module"

[aarcangeli]

Describe the bug

When I start my project with npm start the application starts fine but I can't connect to the server due to the connection refused error.

The problem is that when setupProxy.js is present and there is "type": "module" in package.json, the web server fails to start without giving any error message.

I discovered this error by placing a breaking on webpackDevServer.config.js:120.

Error [ERR_REQUIRE_ESM]: require() of ES Module P:\<project>\src\setupProxy.js from P:\<project>\node_modules\react-scripts\config\webpackDevServer.config.js not supported.

I fixed it by switching back to commonjs, but it wasn't easy to detect this problem.

It would be nice to have more logs on what goes on under the hood so new users don't fall into the same trap

Did you try recovering your dependencies?

Yes, I deleted node_modules and reinstalled everything from scratch.

Which terms did you search for in User Guide?

ERR_CONNECTION_REFUSED and setupProxy.js

Environment

P:\gpt\demo-app\my-app>npx create-react-app --info

Environment Info:

  current version of create-react-app: 5.0.1
  running from C:\Users\Alessandro\scoop\persist\nodejs\cache\_npx\c67e74de0542c87c\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
  Binaries:
    Node: 19.0.0 - ~\scoop\apps\nodejs\current\node.EXE
    Yarn: 1.22.19 - ~\scoop\apps\nodejs\current\bin\yarn.CMD
    npm: 9.4.2 - ~\scoop\apps\nodejs\current\bin\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.43)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    react-scripts: 5.0.1 => 5.0.1
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Create a new blank project with npx create-react-app my-app

2. Create a file src/setupProxy.js with this content (there is no need for a service on port 5000):

   const { createProxyMiddleware } = require("http-proxy-middleware");
   
   module.exports = function (app) {
     // API proxy
     app.use(
       createProxyMiddleware("/api", {
         target: "http://127.0.0.1:5000",
         changeOrigin: true,
       })
     );
   };

3. Add "type": "module" in package.json

4. Start the application with npm start

Expected behavior

The default page with "Learn React" should be visible.

Actual behavior

The web server cannot be started without giving any relevant log message.

Chrome gives the error ERR_CONNECTION_REFUSED

[egoward]

It would be nice to have more logs on what goes on under the hood so new users don't fall into the same trap

Thanks for filing @aarcangeli, I fell into this trap and was lucky to find my way out. Silently failing is pretty bad.

[nicobrenner]

If I even create an empty setupProxy.js file, my react server just stops accepting connections. Even though there are no errors in the console and it says it's working fine. It took a long time just to figure out that the mere creation of the file breaks everything (it doesn't matter the contents of the file, it always breaks the react server)

How do you fix this?

This issue has been open for 2 years now 🤔