使用ReactDOMServer.renderToString结合Express服务时运行报错咨询

这个报错的核心原因很明确——Node.js默认没办法直接解析JSX语法，你直接在路由里写<h1>foo</h1>这种JSX代码，Node会把它当成无效语法，自然就抛出错误了。下面给你两种可行的解决办法：

方法一：用React.createElement替代JSX #

如果不想额外配置转译工具，可以直接用React提供的React.createElement方法来替代JSX写法，Node环境能直接识别这种原生JS语法：

const React = require('react');
const ReactDOMServer = require('react-dom/server');
// ... 其他Express相关代码
app.get('/test', (req, res) => {
  const context = {}
  // 替换JSX为React.createElement
  const html = ReactDOMServer.renderToString(React.createElement('h1', null, 'foo'))
  if (context.url) {
    res.writeHead(302, { Location: context.url })
    res.end()
  } else {
    res.write(html)
    res.end()
  }
});

方法二：配置Babel让Node支持JSX #

如果想保留JSX的写法，需要借助Babel来转译JSX语法。步骤如下：

• 安装必要的Babel依赖包：

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

• 在项目根目录创建.babelrc配置文件，写入以下内容：

{
  "presets": ["@babel/preset-react"]
}

• 修改启动命令，用babel-node替代原生node来启动服务器：

npx babel-node app-server.js

（如果你的入口文件不是app-server.js，替换成对应的文件名即可）

另外还要确保你已经正确引入了React和ReactDOMServer，这两个模块是必须的，不能遗漏：

const React = require('react');
const ReactDOMServer = require('react-dom/server');

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