Webpack not recognizing npm module that starts with '#' - reactjs

Question

I am trying to move from a CRA app to using webpack, but having trouble with the loaders.
I have npm modules that start with '#', including but not limited to #material-ui/core/styles.
Removal of this '#' is not an option, I need to figure out how to get around this error.
The error I am seeing it this:
ERROR in ./node_modules/#connect/nav/lib/Canvas/index.js 116:17
Module parse failed: Unexpected character '#' (116:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| "use strict";
> module.exports = #material-ui/core/styles;
My webpack.config.js is
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
publicPath: '/'
},
resolve: {
modules: [path.join(__dirname, 'src'), 'node_modules'],
alias: {
react: path.join(__dirname, 'node_modules', 'react'),
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
{
test: /\.svg$/,
use: {
loader: 'svg-url-loader',
options: {
encoding: 'base64'
}
}
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader',
options: {
name: '/public/assets/[name].[ext]'
}
}
],
},
plugins: [
new HtmlWebPackPlugin({
template: './public/index.html',
}),
],
devServer: {
historyApiFallback: true,
}
};
Using the following packages:
"#babel/core": "^7.19.1",
"#babel/preset-env": "^7.19.1",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"