Dev Server does not always show webpack config compilation errors

[pistis]

Describe the bug

React dev server not consistently showing webpack configuration errors.
cra's default webpack config doesn't cause any problems.
You can reproduce this problem by customizing your webpack config via tools like react-app-rewired.

This issue is 100% reproducible.

Did you try recovering your dependencies?

It happens in the latest version.

Which terms did you search for in User Guide?

This is a problem that does not show an error message, so I think it has nothing to do with the user guide.

The words I searched for are:

• show only 'Starting the development server...' and not execute
• pending compile when execute npm start

Environment

current version of create-react-app: 5.0.0
running from /Users/peter.lee/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

System:
OS: macOS 12.0.1
CPU: (10) arm64 Apple M1 Pro
Binaries:
Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
Yarn: 1.22.17 - /opt/homebrew/bin/yarn
npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
Browsers:
Chrome: 98.0.4758.102
Edge: Not Found
Firefox: Not Found
Safari: 15.1
npmPackages:
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
react-scripts: ^5.0.0 => 5.0.0
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. Create a basic CRA project

• $ npx create-react-app test-app

2. Customize webpack config to build multiple entries and html
   • install other packages
     • react-app-rewired@2.2.1
     • customize-cra@1.0.0
   • Create separate entry js and html files
     • 
   • Configure config-overrides.js (root path)

const path = require("path");
const { override } = require("customize-cra");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const isEnvProduction = process.env.NODE_ENV === "production";

module.exports = {
  webpack: override(function (config) {
    config.entry = {
      main: path.resolve(__dirname, "src/index.js"),
      second: path.resolve(__dirname, "src/second.js"),
    };

    const htmlWebpackPlugin = config.plugins.find(
      (element) => element.constructor.name === "HtmlWebpackPlugin"
    );

    htmlWebpackPlugin.userOptions.chunks = ["main"];

    config.plugins.push(
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "public/second.html"),
        filename: "second.html",
        chunks: ["second"],
        minify: isEnvProduction,
      })
    );

    return config;
  }),
};

• Modify npm script in packages.json

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

3. $ npm run start

Expected behavior

If it does not run normally, an error should be displayed on the console.

Actual behavior

No error occurs, only the following message is exposed and does not run normally

Reproducible demo

It can be easily reproduced with the reproduction steps described above.

additional clarification (Important)

Not running is normal. (I wrote the code wrong.)
However, the problem is that there is no hint (error message) as to why it was not executed.

I debugged react-scripts in the following way and found the cause of the project not running.

The cause is that the webpack config.output.filename property was not a value for configuration for multiple entries when in development mode.

Debugging was performed by additionally performing the following steps.

1. Set the failed hook of webpack compiler inside the createCompiler function of node_modules/react-dev-utils/WebpackDevServerUtils.js to expose an error message when compilation fails.

compiler.hooks.failed.tap('failed', async stats => {
    console.log(chalk.red('Failed to compile.\n'));
    console.log(stats)
});

2. $ npm run start
3. Check the error message

• 

4. Modify output.filename of webpack config for multiple chunks (config-overrides.js)

const path = require("path");
const { override } = require("customize-cra");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const isEnvProduction = process.env.NODE_ENV === "production";

module.exports = {
  webpack: override(function (config) {
    config.entry = {
      main: path.resolve(__dirname, "src/index.js"),
      second: path.resolve(__dirname, "src/second.js"),
    };

    const htmlWebpackPlugin = config.plugins.find(
      (element) => element.constructor.name === "HtmlWebpackPlugin"
    );

    htmlWebpackPlugin.userOptions.chunks = ["main"];

	// !!! Update !!!
    if (!isEnvProduction) {
      config.output.filename = "static/js/[name].bundle.js";
    }

    config.plugins.push(
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "public/second.html"),
        filename: "second.html",
        chunks: ["second"],
        minify: isEnvProduction,
      })
    );

    return config;
  }),
};

5. $ npm run start
6. Check output in console

• 

[buggedcom]

I've been suffering for months with the same problem. It was previously sorted by simply disabling linting for the dev environment, however, after upgrading to react-scripts 5.0.1 this was a problem again which disabling linting did not fix. With these suggestions, I was also to pinpoint the error to start fixing it.