尝试将 ReactJS.Net 服务器端渲染与 EPiServer 一起使用时出错

Question

我正在尝试在 EPiServer 项目中使用 ReactJS.Net 设置服务器端渲染。为此，我使用提供的 ReactJS.Net Html 扩展来进行渲染，但是，当我运行我的网站

I get an error saying: "ReactJS.NET has not been initialised correctly. Please ensure you have called services.AddReact() and app.UseReact() in your Startup.cs file."

如果我从尝试使用服务器渲染扩展切换到尝试使用 React 正常渲染

I get a different error: "TinyIoCResolutionException: Unable to resolve type: React.Web.BabelHandler".

我认为根本问题是 EPiServer 项目在启动时初始化事物的方式与 vanilla .Net MVC 项目有一些不同，但我不确定有什么不同或如何解决它。

我正在使用 React.Web.Mvc4 v4.0.0 nuget 包、Episerver 11 和 .Net Framework 4.6.2。我采用了我试图呈现的相同组件并将其粘贴到没有 EPiServer 的普通 .Net MVC 项目中，并且它使用扩展正确呈现客户端和服务器端，因此组件不是问题。我发现有人说这个错误通常在 React 或 ReactDOM 未暴露给全局范围时出现，所以我设置它以确保我的 React 组件被添加到全局范围，但也没有运气。

这是我的 ReactConfig：

public static void Configure()
{
    JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
    JsEngineSwitcher.Current.EngineFactories.AddV8();

    ReactSiteConfiguration.Configuration
        .AddScript("~/Static/js/Components/PrimaryCallout.jsx");
}

这是我的组件：

class PrimaryCallout extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            header: this.props.header,
            buttonText: this.props.buttonText,
            buttonLink: this.props.buttonLink
        };
    }

    render() {
        return (
            <div className="primary-callout-container">
                <h2 className="primary-callout-header">{this.state.header}</h2>
                <a href={this.state.buttonLink} className="primary-callout-link">
                    <button className="primary-callout-button">{this.state.buttonText}</button>
                </a>
            </div>
        );
    }
}

下面是我尝试渲染组件的方式：

@Html.React("PrimaryCallout", new
{
    header = Model.Header,
    buttonText = Model.CalloutLinkText,
    buttonLink = Url.ContentUrl(Model.CalloutLink)
})

感谢任何和所有帮助或见解。

谢谢。

Answer 1

经过大量挖掘后，我确定我遇到的问题确实是 Babel 而不是 React。 React 未初始化错误掩盖了真正的问题。我没有将其缩小到我的 Babel 设置中的错误，但我重新进行了捆绑和缩小设置，现在我又回来了运行.

其他人可以从中吸取的教训是，如果您看到此 "ReactJS.NET has not been initialised correctly. Please ensure you have called services.AddReact() and app.UseReact() in your Startup.cs file." 错误，那么请更深入地查看，因为它可能会掩盖您真正问题的错误消息。

尝试将 ReactJS.Net 服务器端渲染与 EPiServer 一起使用时出错

Getting error when trying to use ReactJS.Net server side rendering with EPiServer

javascript

episerver

reactjs