TypeScript编译tsx生成错误模块类型，Node+React环境报错求助

嘿，这个问题我太熟了——几乎每次遇到react_1.default is undefined都是TypeScript的模块编译配置和你的Node/React环境不兼容导致的。核心问题是：你的.js文件用ES模块能正常运行，但.tsx被TypeScript编译成了不符合预期的模块语法，导致Node无法正确识别React的默认导出。

下面是一步步的解决方案：

1. 修正tsconfig.json的核心配置 #

这是最关键的一步，确保TS编译出的模块规范和你的环境匹配。修改你的tsconfig.json，重点关注以下几个配置项：

{
  "compilerOptions": {
    "module": "ESNext", // 或者"ES2020"，匹配Node支持的ES模块版本
    "moduleResolution": "NodeNext", // 和module对应，用Node最新的模块解析逻辑
    "target": "ES2020", // 确保编译后的语法支持ES模块
    "esModuleInterop": true, // 自动处理CommonJS模块的导入，避免default导出问题
    "allowSyntheticDefaultImports": true, // 配合esModuleInterop，允许默认导入无default的模块
    "jsx": "react-jsx", // React 17+推荐的JSX转换，不需要手动导入React
    "strict": true // 开启严格模式，减少潜在问题
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

解释下关键配置：

• esModuleInterop: true：这会让TypeScript在处理CommonJS模块（比如一些旧的npm包）时，自动把import React from 'react'转换成兼容CommonJS的导入逻辑，不会出现.default找不到的情况。
• module: ESNext + moduleResolution: NodeNext：确保TS编译出ES模块语法，和Node/React的模块系统对齐。

2. 确保package.json开启ES模块识别 #

Node需要明确知道你的项目是ES模块还是CommonJS模块，所以在package.json里添加：

{
  "type": "module"
}

如果你的项目同时有CommonJS文件，可以给这类文件命名为.cjs，Node会自动识别。

3. 检查导入语句规范 #

避免混用ES模块和CommonJS的导入方式：

• 正确的React导入：import React from 'react'（开启esModuleInterop后）或者import * as React from 'react'
• 不要在同一个文件里混用import和require

另外，如果你用的是React 17+，开启jsx: react-jsx后，不需要在每个.tsx文件里手动导入React，TS会自动处理JSX转换，也能避免一些导入相关的错误。

4. 清理旧编译产物并重新编译 #

有时候旧的编译文件会干扰新配置，删掉你的dist或build文件夹，然后重新运行编译命令：

rm -rf dist && tsc
# 或者用你的打包工具，比如vite build / webpack

常见坑点补充 #

• 如果是SSR项目（比如Next.js），确保Next.js的配置和TS配置对齐，Next.js默认支持ES模块，但还是要检查tsconfig.json的module设置。
• 如果你用webpack，确保output.module设置为true，让webpack输出ES模块。

按照这些步骤调整后，TypeScript编译出的代码应该会和你的Node/React环境完美兼容，react_1.default is undefined的错误也会消失。

内容的提问来源于stack exchange，提问作者a pfp with melon