Remove console on browser when loading react app with npm start via webpack-dev-server

Question

So after npm build and npm run , why does my react application open with console on the screen? It was not happening when my packages were "webpack-cli": "^4.2.0" and "webpack-dev-server": "^3.11.1". Upgrading them is causing this issue. How can we fix this?

My package.json contains (devDependencies)

 "clean-webpack-plugin": "^3.0.0",
 "copy-webpack-plugin": "^7.0.0",
 "webpack": "^5.11.0",
 "webpack-bundle-analyzer": "^4.3.0",
 "webpack-cli": "^4.9.2",
 "webpack-dev-server": "^4.7.3",
 "webpack-manifest-plugin": "2.2.0",
 "webpack-merge": "^5.7.2"
 "eslint-webpack-plugin": "^2.1.0",
 "html-webpack-plugin": "5.3.2",
 "scripts": {
        "start": "webpack serve --config config/webpack.config.js --env TARGET_ENV=development --env app=web --port 3000",
        "build": "webpack --config config/webpack.config.js --env TARGET_ENV=production",
        "build:staging": "webpack --config config/webpack.config.js --env TARGET_ENV=staging"
}

webpack.config.js

const { merge } = require("webpack-merge");
//const commonConfig = require("./webpack.common.js");

const paths = require("./paths");
const webpack = require("webpack");

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin");
const getClientEnvironment = require("./env");

module.exports = (env) => {
    const targetEnv = env.TARGET_ENV;
    const mode = targetEnv === "development" ? "development" : "production";
    process.env.NODE_ENV = mode;

    // Source maps are resource heavy and can cause out of memory issue for large source files.
    // const shouldUseSourceMap = webpackEnv === "development";

    const commonConfig = {
        mode: mode,

        // Where webpack looks to start building the bundle
        entry: {
            web: paths.src + "/web.tsx",
        },

        // Where webpack outputs the assets and bundles
        resolve: {
            extensions: [".tsx", ".ts", ".js"],
            fallback: {
                util: require.resolve("util/"),
            },
            modules: ["node_modules", "./src"],
        },

        // Customize the webpack build process
        plugins: [
            new webpack.ProvidePlugin({
                process: "process/browser",
            }),
            // Makes some environment variables available to the JS code, for example:
            // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
            // It is absolutely essential that NODE_ENV is set to production
            // during a production build.
            // Otherwise React will be compiled in the very slow development mode.
            new webpack.DefinePlugin(getClientEnvironment(targetEnv).stringified),

            new webpack.IgnorePlugin({
                resourceRegExp: /^\.\/locale$/,
                contextRegExp: /moment$/,
            }),
            // Removes/cleans build folders and unused assets when rebuilding
            new CleanWebpackPlugin(),

            // Copies files from target to destination folder
            new CopyWebpackPlugin({
                patterns: [
                    {
                        from: paths.public,
                        to: paths.build,
                        globOptions: {
                            ignore: ["**/*.html"],
                        },
                    },
                    {
                        from: paths.appPath + "/web.config",
                        to: paths.build,
                    },
                ],
            }),
            // Generates an HTML file from a template
            // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
            new HtmlWebpackPlugin({
                //favicon: paths.src + "/images/favicon.png",
                template: paths.public + "/web.html", // template file
                chunks: ["vendor", "web"],
                filename: "web.html", // output file
                inject: true,
            }),
            new HtmlWebpackPlugin({
                template: paths.public + "/crossplatform.html", // template file
                chunks: ["vendor", "crossplatform"],
                filename: "crossplatform.html", // output file
                inject: true,
            }),
            new ESLintPlugin({
                // Plugin options
                extensions: ["js", "jsx", "ts", "tsx"],
            }),
        ],

        // Determine how modules within the project are treated
        module: {
            rules: [
                // JavaScript: Use Babel to transpile JavaScript files
                {
                    test: /\.(ts|js)x?$/,
                    include: paths.src,
                    //exclude: /node_modules/,
                    loader: "babel-loader",
                    options: {
                        cacheDirectory: true,
                        // See #6846 for context on why cacheCompression is disabled
                        cacheCompression: false,

                        // Babel sourcemaps are needed for debugging into node_modules
                        // code.  Without the options below, debuggers like VSCode
                        // show incorrect code and set breakpoints on the wrong lines.
                        //sourceMaps: shouldUseSourceMap,
                        //inputSourceMap: shouldUseSourceMap,
                    },
                },
                // Images: Copy image files to build folder
                { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: "asset/resource" },

                // Fonts and SVGs: Inline files
                { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: "asset/inline" },
            ],
        },
    };

    const envConfig = require(`./webpack.${mode}.js`)({ app: env.app });
    return merge(commonConfig, envConfig);
};

webpack.development.js

const webpack = require("webpack");
const paths = require("./paths");

module.exports = (args) => {
    return {
        // Control how source maps are generated
        devtool: "cheap-module-source-map",

        output: {
            //path: paths.build,
            publicPath: "./",
            filename: "[name].js",
        },
        // Needed because of an issue with webpack dev server HMR with Webpack https://github.com/webpack/webpack-dev-server/issues/2758
        target: "web",
        // Spin up a server for quick development
        devServer: {
            historyApiFallback: {
                index: "/" + args.app + ".html",
            },
            open: true,
            devMiddleware: {
                publicPath: "/",
            },
            hot: true,
            // By default files from `contentBase` will not trigger a page reload.
            // watchContentBase: true,
        },
        module: {
            rules: [
                // Styles: Inject CSS into the head with source maps
                {
                    test: /\.(css)$/,
                    use: [
                        "style-loader",
                        {
                            loader: "css-loader",
                            //options: { sourceMap: true },
                        },
                    ],
                },
            ],
        },
    };
};