使用TS+Electron+Webpack栈开发时React.createElement类型无效报错

根因定位 #

你遇到的组件导出为undefined的问题由tsconfig配置错误、和webpack打包逻辑冲突两个核心原因导致：

1. tsconfig的include配置仅匹配.ts后缀文件，遗漏了.tsx后缀，你的appView.tsx组件文件未被TypeScript纳入编译范围
2. tsconfig中配置了module: AMD和outFile参数，这两个配置适用于直接通过tsc输出AMD规范单文件的场景，和webpack的模块打包逻辑冲突，会导致模块导出异常
3. 额外的files字段固定指定入口，和include规则叠加后进一步限制了TS的编译范围

修复步骤 #

• 第一步：修改tsconfig.json配置
  修正文件匹配规则，删除和webpack打包冲突的配置：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": [
      "DOM",
      "ES2020",
    ],
    "jsx": "react",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "removeComments": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "moduleResolution": "Node"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "./dist/**/*",
    "./node_modules"
  ]
}

• 第二步：清理缓存后重新打包
  删除dist目录、.tsbuildinfo缓存文件（如果存在）后重新运行webpack打包命令即可。
• 可选校验步骤
  修复后可以先在index.tsx中打印导入的AppView本身，而非JSX元素，确认导出正常：

import { AppView } from './Components/appView'
console.log(AppView)

内容的提问来源于stack exchange，提问作者Tamuka Tagwireyi