Console logging error on bundle.js instead of React component

// webpack.config.js
module.exports = {
    ...
    devtool: '#eval-source-map',
    ...
};

Adding this logs the error in the console with the actual component name and line number in the source. But this allows the users to view the code?

You should enable source mapping for a great debugging experience. Source map will link your bundle with your own code so when an error occurs, the error message will output the line number of your file, not the bundle. By default source map are disabled with webpack and can be enable with the property 'devtool' like this:

// webpack.config.js
module.exports = {
    ...
    devtool: '#eval-source-map',
    ...
};

Here's the link to the official documentation: https://webpack.github.io/docs/configuration.html#devtool

For webpack 6.0.1. I apply the following for logging in browser console:

//webpack.config.js
module.exports = {
  ...
  devtool: 'source-map',
  ...
}

To eliminate much logging and reduce bundle size in production mode you can use 'cheap-module-source-map':

//webpack.config.js
module.exports = {
  ...
  devtool: 'cheap-module-source-map',
  ...
}