React.Create Element type is Invalid

Question

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',
    },
};

Answer 1

*Edited

My mistake was thinking that the webpack ts-loader would take context from from ts-config file and transpile the typescript according to that and webpack the content into the final bundle. Upon looking at my question again ive realised i put the index.tsx file as my entry point which is why i was still getting a bundled webpack file but my imports were undefined the only file being webpack was my index file i believe. That combined with the single file output tsc seems to have been the cause.

tsc was creating a bundle of my typescript.

webpack was creating a bundle of just my index.tsx file

Problem entry: './src/index.tsx' & "outFile": "./dist/main.js"