How to config webpack + ts .NET 6 to use dependencies + how to debug?

[DDaarcon]

Hi. I'm struggling to config my project to be able to use third party dependency (react-select). I'm not familiar with webpack at all, just assumed that this is the only way.
The second thing I would like to accomplish is debugging. Is it even possible while having referenced just main.js, runtime.js and vendor.js?
Or maybe there is another way to use react libraries, that would better fit my needs?
Let me show what I currently have:
webpack.config.js:

const path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
	entry: './React/expose-components.ts',
	output: {
		filename: '[name].[contenthash:8].js',
		globalObject: 'this',
		path: path.resolve(__dirname, 'wwwroot/dist'),
		publicPath: '/dist/'
	},
	mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
	optimization: {
		runtimeChunk: {
			name: 'runtime', // necessary when using multiple entrypoints on the same page
		},
		splitChunks: {
			cacheGroups: {
				commons: {
					test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
					name: 'vendor',
					chunks: 'all',
				},
			},
		},
	},
	module: {
		rules: [
			{
				test: /\.jsx?$/,
				exclude: /node_modules/,
				loader: 'babel-loader',
			},
			{
				test: /\.tsx?$/,
				use: 'ts-loader',
				exclude: /node_modules/,
            }
		],
	},
	resolve: {
		extensions: ['.tsx', '.ts', '.js'],
	},
	plugins: [
		new ManifestPlugin({
			fileName: 'asset-manifest.json',
			generate: (seed, files) => {
				const manifestFiles = files.reduce((manifest, file) => {
					manifest[file.name] = file.path;
					return manifest;
				}, seed);

				const entrypointFiles = files.filter(x => x.isInitial && !x.name.endsWith('.map')).map(x => x.path);

				return {
					files: manifestFiles,
					entrypoints: entrypointFiles,
				};
			},
		}),
	]
};

tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react",
    "esModuleInterop": true,
    "sourceMap": true,
    "types": [ "./types" ],
    "lib": [ "es2015", "dom" ]
  },
  "include": [ "./React/**/*" ]
}

types/index.d.ts:

// @ts-nocheck
import * as _React from 'react';
import * as _PropTypes from 'prop-types'; // @types/prop-types is a dependency of `@types/react`
//import * as Select from 'react-select';


declare global {
    //const React: typeof _ReactJS; // the React types _also_ exported by the React namespace, but export them again here just in case.
    const PropTypes: typeof _PropTypes;
    //const Select: typeof Select;
}

React/expose-components.ts:
uncommenting imports and assignments to global obj results 'window is not defined'

//@ts-nocheck
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as ReactDOMServer from 'react-dom/server';

import DataManagementMain from './data-management/main';

// any css-in-js or other libraries you want to use server-side
//import * as Select from 'react-select';
//import makeAnimated from 'react-select/animated';

global.React = React;
global.ReactDOM = ReactDOM;
global.ReactDOMServer = ReactDOMServer;
//global.Select = Select;
//global.makeAnimated = makeAnimated;

globalThis.Components = { DataManagementMain };

React/data-management/staff.tsx (file, where I have been trying to use Select)

...

import { ColumnSetting, GroupedModificationComponentProps, GroupedTable, GroupedTableData, TableData } from "./table";
//import * as Select from 'react-select';
//import makeAnimated from 'react-select/animated';

interface StaffPersonData extends TableData {
...

.babelrc

{
	"presets": ["@babel/preset-react", "@babel/preset-env"],
	"plugins": [
		"@babel/proposal-object-rest-spread",
		"@babel/plugin-syntax-dynamic-import",
		"@babel/proposal-class-properties"
	]
}

Program.cs

...

    app.UseHsts();
}

#region ReactJS.NET pt 2

// Initialise ReactJS.NET. Must be before static files.
app.UseReact(config =>
{
    //config
    //   .AddScript("~/js/shared/loader.tsx");


    //config
    //    .AddScript("~/js/shared/server-connection.tsx")
    //    .AddScript("~/js/data-management/main.tsx")
    //    .AddScript("~/js/data-management/table.tsx")
    //    .AddScript("~/js/data-management/navigation.tsx")
    //    .AddScript("~/js/data-management/subjects.tsx")
    //    .AddScript("~/js/data-management/staff.tsx")
    //    .AddScript("~/js/data-management/classes.tsx")
    //    .AddScript("~/js/data-management/enums.tsx");

    config
        .SetReuseJavaScriptEngines(true)
        .SetLoadBabel(false)
        .SetLoadReact(false)
        .SetReactAppBuildPath("~/dist");

});

#endregion

app.UseHttpsRedirection();
...

package.json

{
  "name": "schoolassistant",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rimraf wwwroot/dist && webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^18.0.3",
    "typescript": "^4.6.3",
    "ts-loader": "8.3.0",
    "@babel/core": "7.8.7",
    "@babel/plugin-proposal-class-properties": "7.8.3",
    "@babel/plugin-proposal-object-rest-spread": "7.8.3",
    "@babel/plugin-syntax-dynamic-import": "7.8.3",
    "@babel/preset-env": "7.8.7",
    "@babel/preset-react": "7.8.3",
    "babel-loader": "8.0.6",
    "babel-runtime": "6.26.0",
    "rimraf": "3.0.2",
    "webpack": "4.43.0",
    "webpack-cli": "3.3.12",
    "webpack-manifest-plugin": "2.2.0"
  },
  "dependencies": {
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "react-jss": "^8.6.1",
    "react-router-dom": "^5.0.0",
    "react-select": "^3.0.4",
    "reactstrap": "^8.0.0",
    "emotion": "^9.2.12",
    "emotion-server": "^9.2.12",
    "react-emotion": "^9.2.12",
    "react-helmet": "^6.0.0",
    "styled-components": "^4.0.0"
  }
}