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 es 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.

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 es 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.

• javascript
• debugging
• reactjs
• google-chrome-devtools

Share Improve this question Follow asked Oct 6, 2015 at 21:01 user1502186user1502186 31933 silver badges1111 bronze badges 2

• 2 Without seeing the code, I'd say it's likely line 15 of the script tag that contains the JSX it's trying to parse (e.g. the transformer gets the contents of the script tag as text, then piles it). Using a full toolchain that doesn't only work in the browser, for example Babel + webpack, can help with this issue. – Michelle Tilley Commented Oct 7, 2015 at 15:38
• 1 Compile your JSX (instead of the in-browser transform you're using) and turn on sourcemaps. If you are using browserify/babelify, you'll want to set debug:true. – akarve Commented Oct 14, 2015 at 17:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

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.