React.Create 元素类型无效

Question

我正在使用 Typescript、Electron、Webpack 和 NodeJS 制作网络应用程序，但由于某些原因 import/export 无法正常工作。

我收到的错误是：

"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."

我已经对我的导入和导出进行了三次检查，但组件在调用时仍未定义。

Console.Log appView.tsx 导入组件的输出：

文件结构：

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/>;
    }
    
}

编辑 - 遗漏了 webpack 配置

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

*已编辑

我的错误是认为 webpack ts-loader 会从 ts-config 文件中获取上下文并根据它转换打字稿，然后将内容 webpack 到最终的包中。再次查看我的问题后，我意识到我将 index.tsx 文件作为我的入口点，这就是为什么我仍然得到一个捆绑的 webpack 文件，但我的导入是未定义的，我相信唯一的文件是 webpack 是我的索引文件。结合单个文件输出 tsc 似乎是原因。

tsc 正在创建一堆我的打字稿。

webpack 正在创建我的 index.tsx 文件的捆绑包

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

React.Create 元素类型无效

React.Create Element type is Invalid

typescript

reactjs

webpack

electron