Exactly how are you supposed to debug JSX in React.js?

Question

Trying to learn React.js right now but I'm having a lot of trouble with syntax errors. It is not clear to me how to debug JSX when writing react.js code. A typical JSX syntax error will look like this on my console:

"Line 15" does not appear to correspond to any actual code. In my IDE it's a blank line right before my <script> tag. Expanding the error simply shows a couple dozen references to JSXTransformer.js.

When I google this issue, everyone says to simple install the React debugger, which I did, but it is useless when it comes to JSX syntax and won't actually start:

Others have suggested using debugger; calls in my scripts to call the Chrome debugger, which is sensible, but the JSX error somehow halts the script no matter where I put the call.

Answer 1

For those still looking for a quick fix to the broader question posed in the OPs title, consider an inline debug statement in your JSX.

<span>{ console.debug('test') }</span>

This should output a message in your console either before or after the existing error you are attempting to locate. Move the above code up or down in your JSX then refresh and check your console again to narrow down on the location of the error.

It's not ideal but it works. This method will display the word 'undefined' in your resulting HTML so make sure you remove your debug code when you are done.

Answer 2

React has significant trouble with identifying the offensive lines, it's very likely the one before, in your case line 14.