AngularJS渲染TSX编写的React组件报jsxRuntime未定义错误如何解决

• 第一步：修正Webpack中TS/TSX文件的Babel配置
  你当前ts/tsx的loader配置仅配置了@babel/preset-env和@babel/preset-typescript，缺少React JSX的编译规则，导致TSX文件编译时没有正确处理JSX语法，才会残留require('react/jsx-runtime')的调用未被正确适配。修改配置如下：

{
    test: /\.(ts|tsx)$/,
    exclude: /node_modules/, // 修正原错误的字符串格式排除规则，改用正则匹配
    use: {
        loader: 'babel-loader',
        options: {
            presets: [
                '@babel/preset-env', 
                '@babel/preset-typescript',
                // 新增React preset并配置automatic runtime
                ['@babel/preset-react', {
                    "runtime": "automatic"
                }]
            ]
        }
    }
}

• 第二步：清理冗余依赖避免冲突
  你当前package.json中同时存在新版@babel/preset-env和废弃的babel-preset-env@1.6.0，二者会导致编译规则冲突，直接删除旧版babel-preset-env依赖即可。
• 第三步：补全必要的React相关依赖
  你贴出的依赖列表中缺少React核心依赖及类型定义，执行以下命令安装：
  npm install react react-dom && npm install -D @types/react @types/react-dom
• 第四步：可选适配Webpack4的模块解析规则
  如果修改后仍提示react/jsx-runtime找不到，可在Webpack配置的resolve.alias中添加别名适配：

resolve: {
  extensions: ['.js', '.jsx', '.ts', '.tsx'],
  alias: {
    'react/jsx-runtime': require.resolve('react/jsx-runtime')
  }
}

• 第五步：简化Babel配置（可选）
  你现在.babelrc中同时配置了@babel/preset-react和单独的@babel/plugin-transform-react-jsx，其实只需要在@babel/preset-react中配置runtime参数即可，可删除单独的JSX插件配置避免重复：

{
    "presets": [
        "@babel/preset-env",
        ["@babel/preset-react", {
            "runtime": "automatic"
        }]
    ],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread"
    ]
}

内容的提问来源于stack exchange，提问作者Alvaro Losada