reactjs / React.NET

.NET library for JSX compilation and server-side rendering of React components
https://reactjs.net/
MIT License
2.28k stars 940 forks source link

ReactScriptLoadException: Error while loading "/dist/vendor.8435dc72.js": ReferenceError: 'TextEncoder' is not defined #1308

Closed ChristianGilmer closed 1 year ago

ChristianGilmer commented 1 year ago

Keep getting the referenced error when trying to SSR with a Webpack bundle. Copied the webpack config from the reactnet-webpack project.

Using: ChakraCoreJsEngine Win 64 Win 86

See Startup.cs and the exception detail below:

public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();

        services.AddJsEngineSwitcher(options => options.DefaultEngineName = ChakraCoreJsEngine.EngineName)
            .AddChakraCore();
        services.AddReact();
        services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
        services.AddControllersWithViews();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {

        app.UseReact(config =>
        {
            config
                .SetReuseJavaScriptEngines(true)
                .SetLoadBabel(false)
                .SetLoadReact(false)
                .SetReactAppBuildPath("~/dist");
        });

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }
        app.UseHttpsRedirection();
        app.UseStaticFiles();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
        });
    }
}

}

Error:

JavaScriptEngineSwitcher.Core.JsRuntimeException: ReferenceError: 'TextEncoder' is not defined

Engine name: ChakraCoreJsEngine Engine version: Jan 31, 2022 Category: Runtime error Description: 'TextEncoder' is not defined Type: ReferenceError Document name: eval code Line number: 145 Column number: 1 Source fragment: var textEncoder = new TextEncoder(); ---> JavaScriptEngineSwitcher.ChakraCore.JsRt.JsScriptException: Script threw an exception. at JavaScriptEngineSwitcher.ChakraCore.JsRt.JsErrorHelpers.ThrowIfError(JsErrorCode errorCode) at JavaScriptEngineSwitcher.ChakraCore.JsRt.JsContext.RunScript(String script, JsSourceContext sourceContext, String sourceUrl, JsParseScriptAttributes& parseAttributes) at JavaScriptEngineSwitcher.ChakraCore.ChakraCoreJsEngine.<>cDisplayClass25_0.b0() at JavaScriptEngineSwitcher.ChakraCore.ChakraCoreJsEngine.<>cDisplayClass25_0.b0() at JavaScriptEngineSwitcher.ChakraCore.ScriptDispatcher.ScriptTaskWithoutResult.Run() --- End of stack trace from previous location where exception was thrown --- at JavaScriptEngineSwitcher.ChakraCore.ScriptDispatcher.Invoke(Action action) at JavaScriptEngineSwitcher.ChakraCore.ChakraCoreJsEngine.InnerExecute(String code, String documentName) at JavaScriptEngineSwitcher.Core.JsEngineBase.Execute(String code, String documentName) at React.JavaScriptEngineFactory.LoadUserScripts(IJsEngine engine)

ChristianGilmer commented 1 year ago

Figured it out. Was trying to use react and react-dom 18. Had to downgrade the version.