React.Create Element type is Invalid

Im using Typescript, Electron, Webpack and NodeJS to make a webapp but for some reason the import/export isnt working properly.

The error im receiving is:

"Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

Ive tripled checked my imports and exports and the component is still undefined when its called.

Console.Log Output of appView.tsx imported component:

File Structure:

Project:
 -dist
 -node_modules
 -scripts
 -src
  -Components
    appView.tsx
  index.tsx

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
    "module": "AMD", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "lib": [
      "DOM", // DOM definitions - window, document, etc.
      "ES2020",
    ], /* Specify library files to be included in the compilation. */
    "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
    "declaration": true, /* Generates corresponding '.d.ts' file. */
    "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
    "sourceMap": true, /* Generates corresponding '.map' file. */
    "outFile": "./dist/main.js", /* Concatenate and emit output to single file. */
    "removeComments": true,                      /* Do not emit comments to output. */
    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
    "resolveJsonModule": true,
  },
  "files": [
    "./src/index.tsx"
  ],
  "include": [
    "src/**/*.ts",
  ],
  "exclude": [
    "./dist/**/*",
    "./node_modules"
  ]
}

index.tsx:

import React from 'react';
import {render } from 'react-dom';
import {AppView} from './Components/appView'

console.log(<AppView/>);

const root = document.getElementById('root') ;
render(<AppView /> , root);

appView.tsx:

import React, { Component, } from 'react';

const Hello:() => JSX.Element = () => <p>Hello, {"Tamuka"}</p>;

export class AppView extends Component  { 

    render(){
        return <Hello/>;
    }
    
}

• EDIT - Missed the webpack config

const path = require('path');

module.exports = {
    entry: './src/index.tsx',
    mode: 'production',
    output: {
        filename: 'main.bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        fallback: {
            "path": false,
            "fs": false,
            "crypto": false,
            "ws": false,
            "net": false,
            "process": false,
            "electron": false,
            "http": false,
            "https": false,
            "ts-loader":false
        }
    },

    externals: {
        require: 'commonjs2 require',
    },
};