react-rails开启prerender报React::ServerRendering::PrerenderError如何解决

这个TypeError: Cannot read property 'serverRender' of undefined报错，核心原因是react-rails在服务端执行渲染逻辑时，无法找到对应依赖的方法或目标组件，可按以下步骤排查修复：

1. 版本兼容性校验 #

react-rails 2.6.1仅支持React 17及更低版本，如果你项目package.json中安装的是React 18+版本，ReactDOM API发生了破坏性变更，旧版react_ujs无法识别新的服务端渲染方法，就会触发该报错。

• 方案一：降级React、react-dom版本到^17.0.0
• 方案二：升级react-rails到2.7.0及以上版本，适配React 18的API

2. 修正服务端渲染配置 #

你当前的server_rendering.js存在两个问题：

• 服务端执行环境没有window对象，给window挂载属性会触发未定义错误
• 没有将React、ReactDOMServer暴露到服务端全局上下文，react-rails调用渲染方法时找不到对象

修改为以下内容：

// app/javascript/server_rendering.js
import React from 'react'
import ReactDOMServer from 'react-dom/server'
global.React = React
global.ReactDOMServer = ReactDOMServer

const componentRequireContext = require.context("components", true);
const ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

3. 适配组件加载规则 #

react-rails默认需要组件挂载到全局上下文才能被自动识别，你当前的export default导出方式在服务端加载时可能未被正确读取，二选一修改即可：

• 方式一：在TagList.js末尾补充全局挂载逻辑：

global.TagList = TagList

• 方式二：修改视图层组件调用代码，指定default导出：

<%= react_component('TagList.default', { tags: @tags }, { prerender: true }) %>

4. 替换ExecJS运行时（可选） #

如果本地Node.js版本过低或者上下文存在冲突，可以替换为Ruby原生的JS运行时，在Gemfile中添加：

gem 'mini_racer'

执行bundle install后重启服务即可。

可选优化 #

你的TagList组件中如果没有传入className参数，模板中会生成包含undefined的class属性，可修改为以下代码避免冗余：

<div className={`tags-wrapper ${this.props.className || ''}`} >

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