Menu
Problem: I'm working this tutorial to learn about React.js. I've added the showdown.js file to the project correctly and proved it is loaded as a script file in the client browser. When page loads and I look at the console it shows the error listed in the title.
Environment: MVC 4/5, Reactjs.NET
JSX File Looks Like This:
var Comment = React.createClass({
render: function() {
var converter = new Showdown.converter(); <-- Error is here
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{converter.makeHtml(this.props.children.toString())}
</div>
);
}
});
var CommentList = React.createClass({
render: function () {
return (
<div className="commentList">
<Comment author="Daniel Lo Nigro">Hello ReactJS.NET World!</Comment>
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>
</div>
);
}
});
var CommentForm = React.createClass({
render: function () {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
var CommentBox = React.createClass({
render: function () {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
Proof showdown.js file is sent to client Chrome Browser:
Proof the syntax is correct in JSX file
The line of code where exception is thrown is:
var converter = new Showdown.converter();
Question How do I get a new instance of Showdown.convertor?
888
Jan's suggestion above was right. This is what fixed the issue:
<body>
<div id="content"></div>
<script src="https://fb.me/react-0.14.0.min.js"></script>
<script src="https://fb.me/react-dom-0.14.0.min.js"></script>
<script src="@Url.Content(" ~/Scripts/showdown.min.js ")"></script>
<script src="@Url.Content(" ~/Scripts/Tutorial.jsx ")"></script>
</body>
Note that showdown.js must come before the jsx file.
110
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With