SourceMaps and JS Debug Acting Strange

I have a couple weird things going on here during Debugging of my React code:

1) I'm not able to see the values of objects or variables once it hits a debug point.  They simply show undefined

2) I'm getting lines of code hitting debug points that aren't even there and the component isn't even being rendered

For Case #1: Below shows there's no values when hitting my debug point.  If I mouse over anything nothing pops up, nor do I see the typical values that WebStorm shows inline in the actual code realtime, nor do I see any variable values in the debugger as they show undefined

For Case #2: This file is being hit and I'm absolutely sure this component is not being rendered because it's not part of initial load of the Homepage:

Running the site via

"dev": "NODE_ENV=development yarn lint && yarn copyData && yarn compile-server && yarn start & webpack-dev-server -d --watch"

webpack.config.js

```

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

const isProduction = process.env.NODE_ENV === 'production';

const html = () =>
new HtmlWebPackPlugin({
template: path.resolve(__dirname, 'src/client', 'index.html'),
filename: 'index.html',
hash: true,
});

const copyAllOtherDistFiles = () =>
new CopyPlugin({
patterns: [
{ from: 'src/client/assets', to: 'lib/assets' },
{ from: 'package.json', to: './' },
{ from: 'ext/ink-3.1.10/js/ink-all.min.js', to: 'lib/js' },
{ from: 'ext/ink-3.1.10/js/autoload.min.js', to: 'lib/js' },
{ from: 'ext/js/jquery-2.2.3.min.js', to: 'lib/js' },
{ from: 'feed.xml', to: './' },
{
from: 'src/shared',
to: './shared',
globOptions: {
ignore: ['**/*suppressed.json'],
},
},
],
});

module.exports = {
entry: './src/client/index.tsx',
output: {
filename: 'scripts/app.[hash].bundle.js',
publicPath: '',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
devtool: 'source-map',
devServer: {
open: true,
writeToDisk: false,
contentBase: path.resolve(__dirname, 'dist'),
publicPath: '',
stats: 'errors-only',
host: process.env.HOST, // Defaults to `localhost`
port: process.env.PORT, // Defaults to 8080
proxy: {
'/api': {
target: 'http://localhost:3000',
secure: false,
changeOrigin: true,
logLevel: 'debug',
}
},
},
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
},
},
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.(tsx|ts)?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
},
],
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../../',
},
},
'css-loader',
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: 'file-loader',
options: {
outputPath: 'lib/assets/fonts',
},
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader'],
},
],
},
plugins: isProduction
? [
new CleanWebpackPlugin(),
copyAllOtherDistFiles(),
new MiniCssExtractPlugin({
filename: isProduction ? 'lib/css/[name].[hash].css' : 'lib/css/main.css',
}),
html(),
]
: [
copyAllOtherDistFiles(),
new MiniCssExtractPlugin({
filename: isProduction ? 'lib/css/[name].[hash].css' : 'lib/css/main.css',
}),
html(),
],
};

```

JS Debug



Browser (Chrome)

Note this forum editor is frustrating in general, especially with the markdown, the wysiwyg is terrible, no code formatting option.  What's the markdown for this site?  I wish JetBrains would finally improve it after all these years but apparently not.  Why don't you at least have a link that's visible at the top of your forum to this?  Your Code block formatting doesn't even work properly or much at 90% of the time in here.  Why is my text all grey even with the non-code?