如何基于Create React App生成首页静态HTML并解决import运行报错

错误原因 #

你遇到的报错本质是Node.js默认仅支持CommonJS模块规范（require()语法），无法直接解析React组件中使用的ES Module import语法以及JSX语法，所以会抛出语法错误。 #

解决方案 #

方案1：手动转译自定义脚本执行 #

如果要保留你自己写的渲染脚本，可以通过Babel转译让Node能识别相关语法：

1. 安装必要依赖

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

2. 项目根目录新建.babelrc配置文件，内容如下：

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

3. 修正你的渲染脚本（假设命名为prerender.js），注意renderToString需要传入JSX元素而非组件本身：

import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';
const fs = require('fs');

const content = `<html><body>${renderToString(<App />)}</body></html>`
fs.writeFileSync('../public/index.html', content);

4. 在package.json中添加执行命令：

"scripts": {
  "prerender": "babel-node prerender.js"
}

之后执行npm run prerender即可正常运行脚本生成静态HTML。

方案2：使用react-app-rewired适配的预渲染插件（更推荐） #

这种方案不需要自己维护渲染脚本，自动适配CRA的构建流程，能避免很多原生SSR的坑：

1. 安装预渲染插件

npm install react-app-rewire-prerender --save-dev

2. 修改你的config-overrides.js配置：

const rewirePrerender = require('react-app-rewire-prerender');

module.exports = function override(config, env) {
  // 保留你原来的其他自定义配置
  config = rewirePrerender(config, env, {
    routes: ['/'], // 仅预渲染首页，有其他路由可以在这里新增
  });
  return config;
}

3. 正常执行npm run build，构建完成后就会自动生成预渲染好的静态HTML文件，不需要单独执行额外脚本。

注意事项 #

• 你的React组件如果用到window、document等浏览器专属API，要提前做兼容判断：if (typeof window !== 'undefined') { /* 执行浏览器逻辑 */ }，避免预渲染阶段报错
• 预渲染完成后，需要把项目入口的ReactDOM.render替换为ReactDOM.hydrate，复用预渲染生成的DOM节点，提升前端加载性能

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