ASP.NET MVC集成Create React App与ReactJS.NET遇初始化异常求助

问题描述 #

搭建集成Create React App与ReactJS.NET的ASP.NET MVC项目时，触发以下异常：

ReactJS.NET has not been initialised correctly. Please ensure you have called services.AddReact() and app.UseReact() in your Startup.cs file. (ReactNotInitialisedException)
ReactNotInitialisedException at React.ReactEnvironment.get_GetCurrentOrThrow()
    No JS engines were registered. Visit https://reactjs.net/docs for more information. (ReactException)

现有配置 #

1. ReactConfig.cs #

ReactSiteConfiguration.Configuration
              .SetLoadBabel(false)
              .SetLoadReact(false)
              .SetReactAppBuildPath("~/ClientApp/build");
JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
JsEngineSwitcher.Current.EngineFactories.AddV8();

2. 布局页CSHTML代码 #

<html>
<head>
    <title>Hello React</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body className="">
    <div id="content"></div>
    @Html.React("Components.App", new{p1 = "value"})
</body>
</html>

其他情况 #

• 未执行Create React App的eject操作，在默认入口index.js中实现了教程里expose-components.js的逻辑
• 项目无Startup.cs文件，仅包含Global.ascx.cs

解决方案 #

1. 在Global.ascx.cs中完成ReactJS.NET初始化 #

传统ASP.NET MVC无Startup.cs，需在Application_Start方法中完成初始化，替代教程中Startup.cs的配置：

protected void Application_Start()
{
    // 常规MVC初始化流程
    AreaRegistration.RegisterAllAreas();
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);

    // 初始化JS引擎切换器
    JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
    JsEngineSwitcher.Current.EngineFactories.AddV8();

    // 配置ReactJS.NET
    ReactSiteConfiguration.Configuration
        .SetLoadBabel(false)
        .SetLoadReact(false)
        .SetReactAppBuildPath("~/ClientApp/build");
    
    // 关键：注册ReactJS.NET的HTTP模块
    React.Web.ReactHttpModule.Register();
}

2. 确认V8引擎依赖安装完整 #

检查并安装以下NuGet包：

• React.AspNet
• JavaScriptEngineSwitcher.V8
• JavaScriptEngineSwitcher.V8.Native.win-x64（根据系统架构选择对应包，如win-x86、linux-x64）

3. 验证组件暴露逻辑 #

确保index.js中组件被正确暴露到全局Components对象，匹配@Html.React("Components.App")的调用：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 暴露组件到全局，供ReactJS.NET服务端渲染识别
window.Components = window.Components || {};
window.Components.App = App;

// 客户端hydrate逻辑（服务端渲染后同步客户端状态）
const root = ReactDOM.createRoot(document.getElementById('content'));
root.hydrate(<App p1="value" />);

4. 检查ReactAppBuildPath路径有效性 #

确认项目根目录下ClientApp/build存在，且包含Create React App编译后的资源（如static文件夹、index.html），若路径不符则调整为实际相对路径。

5. 在Web.config中注册ReactHttpModule #

在<system.webServer>节点下添加模块注册：

<modules>
  <add name="ReactModule" type="React.Web.ReactHttpModule" />
</modules>

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