react-scripts doesn't check for errors from webpack dev server startCallback()

[mattlovett]

Describe the bug

react-scripts can fail to start the development server, without showing any error information to the user.

From some digging I think the issue is in react-scripts/scripts/start.js, line 125. So far as I can see, when the webpack dev server fails to start then it passes an error to the callback. I hacked it locally to console.log the error and it helped me work out what was wrong with my config, but it's not ideal that react-scripts was silent about the issue.

Something like this might fix it:

// Launch WebpackDevServer.
devServer.startCallback(err => {
  if(err) {
    console.log("webpack dev server failed to start");
    console.log(err);
    process.exit();
  }
  if (isInteractive) {
    clearConsole();
  }

Did you try recovering your dependencies?

Yes, not the problem

Which terms did you search for in User Guide?

I checked the troubleshooting section, and didn't find anything relevant

Environment

Environment Info:

current version of create-react-app: 5.0.1
running from /Users/mlovett/.npm/_npx/50624/lib/node_modules/create-react-app

System:
OS: macOS 13.5
CPU: (10) x64 Apple M1 Pro
Binaries:
Node: 14.20.1 - ~/.nvm/versions/node/v14.20.1/bin/node
Yarn: Not Found
npm: 6.14.17 - ~/.nvm/versions/node/v14.20.1/bin/npm
Browsers:
Chrome: 115.0.5790.114
Edge: 115.0.1901.183
Safari: 16.6
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. Setup a new, clean project:
   npx create-react-app my-app
   cd my-app
   npm start

All ok so far

2. Create a deliberately broken src/setupProxy.js

I used this example file:
module.exports = function() {
throw new Error("deliberate failure");
};

3. Start the dev server again

Expected behavior

react-scripts should report the error

Actual behavior

Console shows:
Compiled successfully!

You can now view my-app in the browser.

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

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

webpack compiled successfully

But... nothing is listening on port 3000

curl -v http://localhost:3000

• Trying 127.0.0.1:3000...
• connect to 127.0.0.1 port 3000 failed: Connection refused

[bmnidhin]

Our team was facing the exact same issue and the fix suggested is working in that project. The above PR fixes it.