CODEWITHSUNDEEP
asp.net-corereactjsreactjs.net
Ryan Langton
Ryan Langton

Reputation: 6160

ReactJS.net unable to debug

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?

Upvotes: 3

Views: 1990

Answers (1)

Daniel Lo Nigro
Daniel Lo Nigro

Reputation: 3424

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

Upvotes: 2

Related Questions