Webpack source maps does not work properly in chrome - google-chrome

Question

My webpack source maps are having some very unexpected behaviour when debugging in chrome.
When I hover over something I get this odd problem as can be seen in this screenshot (in the picture the mouse is hovering over props in this.props)
Notice how in the image I can type this.props in console and it correctly shows the values.
It also does not put the breakpoints on many lines but rather put them somewhere else.
Finally and maybe most crucially.
On a line like this: <QuizQuestionImage updateQuestionIdHandler={(newQuestionId) => this.updateQuestionIdHandler(newQuestionId)} /> I can put a breakpoint. And when the code is working that triggers as it should when updateQuestionIdHandler is called. However, if the method that is called, this is: this.updateQuestionIdHandler(newQuestionId) has an error, then the breakpoint is not hit correctly but rather the error is spit out in console.
This despit that it should have breaked before entering that function that in turn gave an error.
This is my webpack config.
const path = require('path');
module.exports = {
context: path.join(__dirname, 'Scripts', 'react'),
entry: {
client: './client'
},
output: {
path: path.join(__dirname, 'Scripts', 'app'),
filename: '[name].bundle.min.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: [require('#babel/plugin-proposal-object-rest-spread')],
presets: ["#babel/es2015", "#babel/react", "#babel/stage-0"]
}
}
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
externals: {
react: 'React'
},
devtool: 'source-map'
};

Answer 1

Running webpack with "-d" param gives a second set of source maps in chrome that tend to work much better.