已安装@babel/preset-react仍无法解析JSX的React SSR问题

• 第一步：补全项目依赖
  确保已安装所有必须的依赖包，缺失核心包会导致babel编译逻辑不生效，执行以下命令安装：

npm install react react-dom @babel/core @babel/node @babel/preset-env @babel/preset-react
# 仅作为开发依赖的场景可添加-D参数

• 第二步：修正Babel配置

1. 优先将配置文件.babelrc重命名为babel.config.json，该格式为Babel 7+推荐的全局生效配置，可避免相对路径下.babelrc加载失效的问题，配置内容调整如下：

{
  "presets": [
    "@babel/preset-env", 
    ["@babel/preset-react", {
      "development": true,
      "runtime": "automatic"
    }]
  ],
  "plugins": ["@loadable/babel-plugin"]
}

新增的runtime: "automatic"适配React 17+的新JSX转换规则，无需在每个写JSX的文件顶部手动引入React即可正常编译。如果使用的是React 16及更早版本，需删除该配置，并在所有包含JSX语法的文件顶部添加import React from 'react'。
2. 注意检查项目根目录下是否存在其他Babel配置（如package.json中的babel字段、babel.config.js等），多个配置会产生覆盖冲突，仅保留一份即可。

• 第三步：修正启动脚本
  避免全局与本地babel-node版本不一致导致配置不生效，将启动脚本调整为调用项目本地的babel-node：

"scripts": {
  "start": "nodemon --exec npx babel-node src/server.js"
}

• 第四步：验证编译能力
  配置调整完成后，在项目根目录执行以下命令验证JSX编译是否正常：

npx babel-node -e 'console.log(<h1>test</h1>)'

命令执行无报错即可正常启动服务，原SyntaxError问题会被解决。

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