Ошибка при попытке использовать ReactJS.Net на стороне сервера рендеринга с EPiServer - PullRequest
Новая
       11

Ошибка при попытке использовать ReactJS.Net на стороне сервера рендеринга с EPiServer

0 голосов
/ 05 февраля 2019

Я пытаюсь настроить рендеринг на стороне сервера с использованием ReactJS.Net в проекте EPiServer.Для этого я использую предоставленное расширение ReactJS.Net Html для рендеринга, однако, когда я запускаю свой сайт

, я получаю сообщение об ошибке : «ReactJS.NET не была правильно инициализирована. Убедитесь, что вы вызвали services.AddReact () и app.UseReact () в файле Startup.cs. "

Если я переключаюсь с попытки использовать расширение рендеринга сервера на попытку рендеринга в обычном режиме с React

Я получаю другую ошибку : "TinyIoCResolutionException: Невозможно разрешить тип: React.Web.BabelHandler ".

Я думаю, что основная проблема заключается в том, что существует некоторая разница в том, как проект EPiServer инициализирует вещи при запуске, против ванильного проекта .Net MVC, но я не уверен, в чем разница или какобойти это.

Я работаю с пакетом nuget React.Web.Mvc4 v4.0.0, Episerver 11 и .Net Framework 4.6.2.Я взял тот же компонент, который пытался отрисовать, и вставил его в ванильный проект .Net MVC без EPiServer, и он правильно отображает на стороне клиента и на стороне сервера, используя расширение, поэтому компонент не является проблемой.Я обнаружил что-то, говорящее о том, что эта ошибка обычно появляется, когда React или ReactDOM не доступны для глобальной области видимости, поэтому я настроил ее, чтобы гарантировать, что мой реагирующий компонент добавляется в глобальную область действия, но там тоже не повезло.

Вот мой 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)
})

Любая помощь или понимание приветствуется.

Спасибо.

1 Ответ

0 голосов
/ 08 февраля 2019

После долгих раскопок я решил, что проблема, с которой я столкнулся, была, в действительности, с Бабелем, а не с Реактом.Ошибка React not initialized была душераздирающей проблемой.Я не сузил это до того, что в моей настройке Babel было неверно, но я заново выполнил настройку связывания и минификации, и теперь я вернулся к работе.

Урок, который можно извлечь из этого для всехиначе, если вы видите это «ReactJS.NET не был правильно инициализирован. Пожалуйста, убедитесь, что вы вызвали services.AddReact () и app.UseReact () в вашем файле Startup.cs».ошибка, а затем посмотрите глубже, потому что это, вероятно, душит сообщение об ошибке для вашей настоящей проблемы.

...