Webpack react compiles even when there is error in the code - reactjs

Question

I am using webpack 5 I will put the content of my config below, the issue I am facing is that the code is getting compiled even if I tried making a function call in the code and that function doesn't exist but the code compiles and the app doesn't give any sort of error and of course the functionality isn't working which is expected.
My config file
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const DotenvWebpackPlugin = require("dotenv-webpack");
const mode = process.env.NODE_ENV
const IS_PROD = mode === 'production';
const IS_DEV = !IS_PROD;
const ROOT_DIR = path.resolve(__dirname, '../');
const SRC_DIR = path.resolve(ROOT_DIR, 'src');
module.exports = {
mode,
entry: "./src/index.js",
devServer: {
historyApiFallback: true,
compress: true,
port: 3000,
client: {
overlay: true,
}
},
output: {
publicPath: "/",
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps for css
}),
new OptimizeCssAssetsPlugin({})
]
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
//cacheDirectory: true,
//cacheCompression: false,
envName: IS_PROD ? "production" : "development"
}
}
},
{
test: /\.(css)$/,
use: [
IS_PROD ? MiniCssExtractPlugin.loader : "style-loader",
"css-loader"
]
},
{
test: /\.(png|gif|jpg|svg|ttf|eot|svg|otf|woff(2)?)(\?[a-z0-9]+)?$/,
type: 'asset/resource'
}
]
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new DotenvWebpackPlugin({
path: path.resolve(__dirname, '.env'),
systemvars: true
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/index.html'),
}),
new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin({
experimentalUseImportModule: true,
filename: "assets/css/[name].[contenthash:8].css",
chunkFilename: "assets/css/[name].[contenthash:8].chunk.css"
})
],
}
Code snippet
if (data.role === "REGISTERED") {
showMessageWrong("Your access request is yet to be approved by your manager!") // there is no such function the actual function is showMessage
//redirectToLogin()
}
This causes lot of issue when debugging the app won't work but find RC will be troublesome can someone point out what am I missing!