使用Webpacker+React-Rails实现Rails服务端渲染时出现'Set未定义'错误

你碰到的这个ExecJS::ProgramError是服务端渲染的JS环境不支持ES6的Set对象导致的——客户端渲染时Webpack会自动帮你处理ES6特性的polyfill，但服务端渲染用的server_rendering.js bundle默认没包含这些必要的兼容代码。

下面是具体的解决步骤：

1. 安装ES6 polyfill依赖 #

首先安装core-js，它能给旧JS环境提供ES6+的特性支持：

yarn add core-js@3

2. 修改服务端渲染的bundle文件 #

打开app/javascript/packs/server_rendering.js，在最顶部添加polyfill的导入，确保服务端环境先加载这些兼容代码：

// 先导入polyfill，确保服务端支持ES6+特性
require('core-js/stable');
require('regenerator-runtime/runtime');

// 你原来的代码保持不变
var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)

如果你用的是ES模块语法（import/export），也可以写成：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

// 原来的代码...

3. 确保ExecJS运行时支持ES6 #

如果上面的步骤还没解决问题，检查你的ExecJS运行时版本。推荐使用mini_racer（基于Chrome V8），它对ES6的支持很好。在你的Gemfile里指定一个较新的版本：

gem 'mini_racer', '~> 0.6.0'

然后运行：

bundle install

4. 验证配置 #

最后重启你的Rails服务器，访问页面测试服务端渲染是否正常。如果你的组件里用到了其他ES6+特性，polyfill也会一并处理。

补充说明：客户端渲染时Webpacker的默认配置已经包含了polyfill，但服务端渲染的bundle是单独构建的，所以需要手动添加这些兼容代码，确保服务端的JS环境和客户端一致。

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