ReactJS.net unable to debug

Question

I've created a small app using ReactJS.Net and ASP.NET 5. If I render a component serverside using @Html.React and tie that to the MVC

@using System.Threading.Tasks
@using React.AspNet
@model Models.DashboardViewModel

@Html.React("MessageBoard", new
{
    recentPosts = Model.RecentPosts
})

messageBoard.jsx

"use strict";

var MessageBoard = React.createClass({
    render: function(){
        return (<table className="table forum table-striped">
                <thead> 
                    <tr>
                        <th className="cell-stat"></th>
                        <th>Topic</th>
                        <th className="cell-stat text-center hidden-xs hidden-sm">Replies</th>
                        <th className="cell-stat-2x hidden-xs hidden-sm">Last Post</th>
                    </tr>
                </thead>
                    <tbody>
                        {this.props.recentPosts.map(function(boardPost){
                            return <BoardPostRow post={boardPost}/>;
                        }, this)}
                    </tbody>
                </table>)
        }
});

This all works great. The problem is that when I go to sources, there is no .js file so I have no way to debug. This is probably ok for some simple read-only elements. But now I want to render some interactive elements that contain state, a form for creating a new Post to the "message board". Here's the code in the same *.cshtml file.

<div id="newPost"></div>

@section scripts
{
    <script src="@Url.Content("~/scripts/Components/Board/boardPostForm.jsx")"></script>
    <script src="@Url.Content("~/scripts/Components/Common/textInput.jsx")"></script>
    <script>React.render(BoardPostForm({}), document.getElementById("newPost"))</script>
    @Html.ReactInitJavaScript()
}

The error I get in the console is:

Uncaught SyntaxError: Unexpected token <
textInput.jsx:19 Uncaught SyntaxError: Unexpected token <
(index):69 Uncaught ReferenceError: BoardPostForm is not defined(anonymous function) @ (index):69
(index):70 [.NET] Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of MessageBoard. See http://fb.me/react-warning-keys for more information.
(index):71 [.NET] Warning: Unknown DOM property class. Did you mean className?
(index):71 Uncaught ReferenceError: MessageBoard is not defined

It seems an error trying to read the .jsx, because it takes me to the render function when I click on the error. What am I missing here? Maybe I need to do the jsx->js conversion as part of my build process (I am using Gulp) instead of relying on ReactJS.NET?

score 2 · Accepted Answer · answered Sep 14 '15 at 03:53

2

What happens if you hit /scripts/Components/Board/boardPostForm.jsx in your web browser? It should show the compiled JSX and have some ReactJS.NET info at the top of the file. If it doesn't, make sure the *.jsx handler is configured in your Web.config. It should look something like this:

<add name="ReactJsx" verb="GET" path="*.jsx" type="React.Web.JsxHandlerFactory, React.Web" preCondition="integratedMode" />

What am I missing here? Maybe I need to do the jsx->js conversion as part of my build process (I am using Gulp) instead of relying on ReactJS.NET?

You can use Gulp if you like, up to you. I have a sample here that uses Webpack for bundling, and ReactJS.NET for server-side rendering: https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Webpack

answered Sep 14 '15 at 03:53

Daniel Lo Nigro

3,346
27
29

I forgot to mention I'm using ASP.NET 5 so there is no web config. If I go to the .jsx file I am seeing it in uncompiled format. Thanks for the quick response, I'll take a look at your sample. – Ryan Langton Sep 14 '15 at 13:10
I'm now compiling to .js as part of my build process... I don't understand however why I need both the – Ryan Langton Sep 15 '15 at 01:47
I am getting a similar error when i try and perform server side rendering. I receive an uncaught reference error workstation is not defined for the following: – monkeyjumps Nov 12 '15 at 05:56
I was following the example on the reactjs.net tutorial page and was placing my jsx file in the bundle config and including the bundle ref in my view page. This did not work for me. It only worked with out error when i specifically referenced the jsx file using a script tag in my view page – monkeyjumps Nov 13 '15 at 05:41
@Daniel Lo Nigro - Is this supposed to recompile on develop? – ovatsug25 Nov 14 '15 at 18:05
@monkeyjumpsSounds like you're not loading the "Workstation" component client-side. You need to load the JavaScript client-side too, unless you explicitly render the component *only* server-side. – Daniel Lo Nigro Nov 14 '15 at 21:41
@ovatsug25 Depends on what you're doing. If you're using Webpack or similar, you'd need to use Webpack's watch mode. ReactJS.NET automatically reloads the built JS file on page load. If you're just using the JSX files directly, ReactJS.NET will automatically reload them when you modify them. – Daniel Lo Nigro Nov 14 '15 at 21:42

ReactJS.net unable to debug

1 Answers1