ReactJS.NET SSR报错Object不支持forwardRef属性或方法如何解决

你遇到的报错本质是 ReactJS.NET 3.2.0 内置的服务端JS执行环境自带的React版本低于16.3，而forwardRef是React 16.3才正式推出的API，你引入的simplebar-react版本依赖了该API，服务端执行时调用不存在的API就触发了类型错误。

方案1：升级ReactJS.NET（最推荐） #

ReactJS.NET 4.0及以上版本已内置支持16.3+版本的React，可直接兼容forwardRefAPI：

• 升级项目中所有ReactJS.NET相关的NuGet包（如React.AspNet）到4.0以上的稳定版
• 确保npm安装的React/ReactDOM版本和ReactJS.NET内置的版本号完全匹配，避免hydrate阶段出现DOM不匹配问题

方案2：服务端 mock simplebar-react 组件 #

如果暂时无法升级ReactJS.NET，可以在服务端打包时用无逻辑的占位组件替换真实的simplebar-react，规避forwardRef调用：

1. 新建一个mock组件文件MockSimpleBar.jsx：

import React from 'react';
const MockSimpleBar = ({ children, ...rest }) => <div {...rest}>{children}</div>;
export default MockSimpleBar;

2. 在服务端对应的Webpack配置中添加别名，把simplebar-react指向你写的mock组件：

const path = require('path');
module.exports = {
  // 其余原有配置
  resolve: {
    alias: {
      'simplebar-react': path.resolve(__dirname, './你的mock组件路径/MockSimpleBar.jsx')
    }
  }
}

该方案不影响客户端的真实组件逻辑，服务端输出的DOM结构也能和客户端hydrate结果匹配。

方案3：自定义服务端React加载逻辑 #

ReactJS.NET支持手动指定服务端执行用的React脚本，你可以自行引入高版本React覆盖内置版本：

1. 下载16.3+版本的React、ReactDOMServer生产环境脚本放到项目静态资源目录
2. 在Startup.cs的React配置中关闭内置React加载，引入自己的脚本：

ReactSiteConfiguration.Configuration
  .SetLoadReact(false)
  .AddScript("~/静态资源路径/react.production.min.js")
  .AddScript("~/静态资源路径/react-dom-server.browser.production.min.js");

注意自行引入的React版本必须和客户端npm安装的React版本完全一致。

方案4：降级simplebar-react版本 #

可以将simplebar-react降级到v1.0.0之前的版本，该阶段的版本未使用forwardRefAPI，可兼容低版本React。但该方案会缺失新版本功能，还可能存在其他兼容性隐患，仅作为临时备选方案。

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