Webpack is throwing lots of errors from node modules when running watch-development - vue.js

Question

When running watch-development I am plagued with so many errors from my node modules and I'm not sure where to begin to even resolve some of them. Maybe something is wrong with my webpack configuration but I have tried looking for a solution for days now and have found nothing
Some of the errors:
TS2307: Cannot find module 'rxjs-compat/operators/multicast'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\observeOn.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\observeOn.ts(1,15)
TS2307: Cannot find module 'rxjs-compat/operators/observeOn'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\onErrorResumeNext.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\onErrorResumeNext.ts(1,15)
TS2307: Cannot find module 'rxjs-compat/operators/onErrorResumeNext'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\pairwise.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\pairwise.ts(1,15)
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(37,3)
TS2552: Cannot find name 'expect'. Did you mean 'expected'?
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(40,1)
TS2582: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i #types/jest` or `npm i #types/mocha`.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(42,3)
TS2304: Cannot find name 'expect'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(45,3)
I have hundreds of errors like this all coming from my node modules, Mostly complaining it can't find a module, but also some complaining it cannot find name 'x'
this is my webpack config:
/// <binding />
"use strict";
module.exports = (env, options) => {
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoader = require("vue-loader");
let pathsToClean = ['dist/*.*', 'dist/fonts/*.*', 'dist/images/*.*'];
let cleanOptions = {
root: __dirname + '/wwwroot/',
verbose: true,
dry: false
};
return {
mode: 'development',
entry: {
app: './wwwroot/VueApp/Home/app.ts',
mainCss: './wwwroot/VueApp/CSS/site.scss'
},
devtool: 'source-map',
plugins: [
new CleanWebpackPlugin(pathsToClean, cleanOptions),
new webpack.ProvidePlugin({
Popper: ['popper.js', 'default'],
moment: 'moment',
vueResource: 'vue-resource',
vueRouter: 'vue-router',
vuex: 'vuex'
}),
new VueLoader.VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "[name].bundle.css"
})
],
output: {
publicPath: "/dist/",
path: path.join(__dirname, '/wwwroot/dist/'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules)/,
query: {
presets: [
['env', { targets: { uglify: true } }]
]
}
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { minimize: true, sourceMap: false } },
{
loader: 'sass-loader', options: { sourceMap: false } }
],
},
{
test: /\.(svg|png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: './images/[name].[ext]'
}
}
},
{
test: /\.(eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: './fonts/[name].[ext]'
}
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
},
extensions: ['.ts', '.js', '.vue', '.json']
}
};
};
this is what my file structure looks like:
https://ibb.co/xjQMCX0