React+TypeScript项目报错Cannot read properties of undefined (reading 'render')

问题根源 #

你的tsconfig.json缺少两项兼容CommonJS模块导入的配置，导致TypeScript编译后无法正确拿到react-dom的导出对象：

• TypeScript默认不会对CommonJS模块的默认导入做语法兼容，你使用import ReactDom from 'react-dom'语法导入CJS格式的react-dom包时，实际拿到的是undefined，调用undefined.render就会触发你遇到的报错
• JSX文件走Babel编译时默认开启了兼容处理，所以换成JSX入口可以正常运行

解决方案 #

推荐使用配置兼容的方案，无需修改业务代码：
在你的tsconfig.json的compilerOptions字段中新增两个配置项：

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "commonjs",
        "resolveJsonModule": true,
        "jsx": "react",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true
    }
}

修改完成后重启开发服务即可恢复正常。

如果不想修改配置，也可以直接调整导入语法：

// 将默认导入改为命名空间导入即可
import * as React from 'react';
import * as ReactDom from 'react-dom';

内容的提问来源于stack exchange，提问作者Magdi Gamal