React SSR项目中JSX导入TSX文件失败的问题求助

我来帮你梳理下问题根源和解决方案，毕竟我也踩过类似的坑😉

问题根源拆解 #

1. 模块找不到错误：你在服务端的renderSSR.js里用import App from "../src/App"找不到模块，是因为Node.js的默认模块加载器（CommonJS）只会自动识别.js/.json等后缀，你的Webpackresolve.extensions配置只作用于前端打包流程，服务端运行时根本不读这个配置，所以它不知道要去查找App.tsx文件。

2. TSX语法错误：当你加上.tsx后缀后，Node直接读取了TSX文件，但它本身不支持TypeScript的import * as React from "react"这种语法，也不认识JSX，自然就抛出语法错误了。

不需要改用ts-node的解决方案 #

我们可以通过Babel来让服务端的JavaScript文件能正确解析TSX模块并转译语法，具体步骤如下：

1. 安装必要依赖 #

首先安装Babel相关的转译包：

npm install @babel/core @babel/node @babel/preset-env @babel/preset-react @babel/preset-typescript --save-dev

2. 创建Babel配置文件（.babelrc或babel.config.json） #

在项目根目录创建.babelrc，配置如下：

{
  "presets": [
    "@babel/preset-env", // 转译ES6+语法到Node支持的版本
    "@babel/preset-react", // 转译JSX
    "@babel/preset-typescript" // 转译TypeScript
  ]
}

3. 修改服务端启动方式 #

原来你可能是直接用node renderSSR.js启动服务端，现在改成用babel-node来启动，它会在运行前用Babel转译所有相关文件：

npx babel-node renderSSR.js

如果是生产环境，建议先预编译服务端文件再运行，避免实时转译的性能损耗：

npx babel renderSSR.js --out-dir dist
node dist/renderSSR.js

4. 优化导入语句（可选） #

如果不想每次导入都写.tsx后缀，可以给Node配置模块扩展名，在renderSSR.js最顶部加上：

require.extensions['.tsx'] = require.extensions['.jsx'];
require.extensions['.ts'] = require.extensions['.js'];

不过这种方式属于Node的遗留API，官方不推荐长期使用，还是更建议配合Babel的转译流程来处理。

验证方案 #

现在你可以把导入语句改回import App from "../src/App"，然后用babel-node启动服务端，应该就能正常加载App组件，也不会出现语法错误了。

内容的提问来源于stack exchange，提问作者Sharon S