CODEWITHSUNDEEP
javascriptreactjs
bsky
bsky

Reputation: 20242

React JSX code not compiling

I am rendering in the browser an HTML page which references a react class. Unfortunately, I am getting this error: 

Uncaught SyntaxError: Unexpected token <

On the third line of the following function (the <div> statement).

render: function() {
    return (
      <div>
        <h1>Res</h1>
        <resE data={this.state.data} />
      </div>
    );

It appears that the JSX is not transformed properly. However, I am referencing JSXTransformer in the HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>

Furthermore, I tried adding the following line at the top of the file containing the react class:

/** @jsx React.DOM */

However, the error persisted.

Upvotes: 2

Views: 2492

Answers (1)

Chris Hawkes
Chris Hawkes

Reputation: 12430

Can you show the script that your code sits in?

I believe your issue is that you need to make sure that script has the attribute 

type="text/jsx"

so to solve your issue do this; 

<script type="text/jsx" src="app/restrictions/Main.js"></script>

Your JSX compiler script looks for any scripts that have that text/jsx attribute to know that it needs to turn that JSX code to raw JavaScript.

Upvotes: 3

Related Questions