如何调试react-rails中开启prerender:true触发的ExecJS报错

可能的故障诱因 #

• 依赖导入导出的环境差异：你用到的react-redux、@reduxjs/toolkit等第三方依赖，在预渲染使用的ExecJS/Node环境下的导出规则和浏览器端存在差异，比如命名导入的组件在服务端环境实际是默认导出，导致导入结果为undefined。
• 浏览器专属API提前执行：Main组件或myReducer依赖的代码中，在顶层作用域、组件外立即执行函数等位置直接调用了window、document、localStorage等只有浏览器才有的API，预渲染阶段执行时触发异常，导致组件初始化失败，最终导出为undefined。
• 全局store实例异常：你当前的store是在App组件外部全局实例化的，预渲染阶段多次渲染会复用同一个store实例，可能触发Redux内部状态污染或异常，导致Provider组件无法正常初始化。
• React版本不一致：预渲染环境加载的React版本和客户端依赖的React版本不匹配，导致组件类型校验不通过。

调试方法 #

• 缩小异常范围：先把<Main>组件替换为纯文本的简单div，只保留Provider和store的基础结构，开启预渲染测试是否报错。如果仍报错，问题出在Provider或store初始化逻辑；如果不报错，问题出在Main组件及其依赖代码。
• 定位异常的导入项：在App组件顶层添加日志打印（预渲染阶段的日志会输出到服务端控制台），确认哪个导入项为undefined：

console.log('Provider: ', Provider, 'Main组件: ', Main, 'myReducer: ', myReducer)

• 修正浏览器API调用：排查所有相关代码，把提前执行的浏览器专属API逻辑移动到useEffect回调中，或者添加环境判断后再执行：

const isPrerenderEnv = typeof window === 'undefined'
if (!isPrerenderEnv) {
  // 仅在客户端执行的浏览器API逻辑
}

• 调整store实例化逻辑：把全局的store实例化改为函数返回，避免预渲染阶段全局复用同一个store：

const generateStore = () => configureStore({
  reducer: {
    myReducer: myReducer,
  },
});

function App(props) {
  const store = generateStore()
  return (
    <Provider store={store}>
      <Main current_user={props.current_user} />
    </Provider>
  );
}

• 修正不兼容的导入方式：如果定位到是Provider导入为undefined，可以调整导入写法适配CommonJS环境的导出规则：

// 原命名导入
import { Provider } from 'react-redux'
// 调整为以下任意一种写法
import Provider from 'react-redux/lib/components/Provider'
// 或者
import * as ReactRedux from 'react-redux'
// 调用时使用 <ReactRedux.Provider store={store}>

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