Configuring React with Asp.net MVC4,getting error like Failed to load resource[app.jsx] in browser

Question

Index.cshtml

@{
  ViewBag.Title = "Home Page";
 }

<div id="content"></div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
<script src="~/Scripts/react/react.min.js"></script>
<script src="@Url.Content("~/Scripts/app/app.jsx")"></script>

app.jsx

var HelloWorld = React.createClass({
    render: function () {
        return (
            <div>Hello World!!</div>
        );
}
});

getting error in browser like

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

start your app in debug mode and see what exception it gives you — Martin Shishkov
– Martin Shishkov, Commented Nov 19, 2017 at 10:09

Radheshyam Gawari. · Accepted Answer · 2020-05-28 13:32:14Z

4

Resolved this issue with following steps,

1) Make a sure installed React.Web.Mvc4 Package, it is named in NuGet manager as ReactJS.NET

2) Install the following packages from NuGet manager,

 JavaScriptEngineSwitcher.V8
 JavaScriptEngineSwitcher.V8.Native.win-x64
 JavaScriptEngineSwitcher.V8.Native.win-x86

3) In App_Start directory update a file ReactConfig.cs

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

4) Clean, Build the solution.

edited May 28, 2020 at 13:32

answered May 28, 2020 at 10:40

Radheshyam Gawari.

1561 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gustavo · Accepted Answer · 2019-09-19 20:02:09Z

2

First, your code seems to be ok.

You can look at the url that give you error 500 on the browser. localhost/.../.jsx

you may have something like this

If you looks at https://reactjs.net/getting-started/aspnet.html

On your project you must have reactconfig.cs

you need to configurare as in the picture

that's it.

answered Sep 19, 2019 at 20:02

Gustavo

515 bronze badges

1 Comment

Armando Servin Over a year ago

I only configured as follows: JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName; JsEngineSwitcher.Current.EngineFactories.AddV8(); I did not add the .AddScript("~/Scripts/bla/bla") and the MVC Razor view finds and renders the jsx file.

Martin Shishkov · Accepted Answer · 2017-11-19 10:14:55Z

0

Try to transpile your .jsx files to .js with babel or web compiler (install from VS extensions) and reference those from the view. Also, remove the second react lib:

<script src="~/Scripts/react/react.min.js"></script>

answered Nov 19, 2017 at 10:14

Martin Shishkov

2,8675 gold badges29 silver badges44 bronze badges

Comments

Evgeny Urubkov · Accepted Answer · 2021-02-13 23:07:27Z

0

Resolved by adding this to ConfigureServices in Startup.cs:

services.AddJsEngineSwitcher(options => 
     {
           options.DefaultEngineName = V8JsEngine.EngineName;
           options.EngineFactories.AddV8();
     }
);

answered Feb 13, 2021 at 23:07

Evgeny Urubkov

1602 silver badges7 bronze badges

Collectives™ on Stack Overflow

Configuring React with Asp.net MVC4,getting error like Failed to load resource[app.jsx] in browser

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related