Javascript react Uncaught SyntaxError: Unexpected token '<' or Syntax error

Question

I am starting with React and I am doing an exercice from an edX-class (not for certification but for fun). The code is supposed to load buttons from the react class to the html page.

Edit: On other examples the code executed successfully so I am not directly looking at changing my configuration setup

There is an error in my script which is preventing the .js file to load correctly and I cannot figure out where it is coming from.

I am using VSCode 1.42.1 and debugging on Chrome 76.0. In VSCode there in no error output. When live loading it in Chrome I get the error message

Uncaught SyntaxError: Unexpected token '<'

I have tried to verify the syntax but I couldn't trace the error. What I tried: - Check the syntax of the render and return function - Check the error message - Recreate the script to exclude programming errors - Checked the script references

I could use some help in finding the error or to be pointed in the right direction.

Html file: fontchoosertest.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="Fontchoose_container"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
   <div>
    Here goes...
     <!--Programmed scripts-->
      <script src="./FontChooser.js" type="text/javascript"></script> 
    ....done
</div>
</body>
</html>

Javascript/ React file: FontChooser.js

class FontChooser extends React.Component {
    constructor(props) {
    super(props);

    this.state = {hideElement:true}
    this.text="Click on this part"
    this.size=10
    }

    render() {
    return(<div>
           <input type="checkbox" id="boldCheckbox" hidden={false}/>
           <button id="decreaseButton" hidden={false}>-</button>
           <span id="fontSizeSpan" hidden={false}>{this.props.size}</span>
           <button id="increaseButton" hidden={false}>+</button>
           <span id="textSpan" >{this.props.text}</span>
           </div>
    );
    }
}

'''

you can't do jsx (<IamJSX />) without transpilation. Use create-react-app :) — Alexandre Nicolas
– Alexandre Nicolas, Commented Mar 13, 2020 at 9:47
if you are just having a play around - you can use a web client transpiler - but this is not good practice - and would not be advised for serious development + deployment to prod - see babel.js in docs reactjs.org/docs/add-react-to-a-website.html — developer
– developer, Commented Mar 13, 2020 at 9:49
I have been able to run other React components in VSCode using the current configuration. I know that my setup is working. It is not just about playing around by the way. I have spent over half a day trying to make this example work. I am really asking a question concerning the code syntax. — Gerardsson
– Gerardsson, Commented Mar 13, 2020 at 10:05

awran5 · Accepted Answer · 2020-03-13 11:50:16Z

1

This error because the browser can't read JSX that returned from your render method so it will threw an error whenever it sees the first opening JSX tag <

In order to use JSX you'll need a transpiler like babeljs

First please note that JSX is completely optional and you can still use React without it. Check here for more info.

Please follow this structure:

<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>
    <!-- React container -->
    <div id="Fontchoose_container"></div>

    Here goes...
    <!--Programmed scripts-->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <!-- DON'T use babel in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- You can use JSX in any <script> tag by adding type="text/babel" attribute to it. -->
    <script type="text/babel" src="./FontChooser.js"></script>
    ....done
  </body>
</html>

In your FontChooser.js

class FontChooser extends React.Component {
  constructor(props) {
    super(props);
    //...
  }

  render() {
    return(
       {/* JSX here */}
     );
  }
}
// Add this
ReactDOM.render( <FontChooser />, document.getElementById('Fontchoose_container'))

Lastly, you'll need to open this page with a server for example VS Code LiveServer

Important Note:

This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production. When you’re ready to move forward, remove this new tag and the type="text/babel" attributes you’ve added. Instead, in the next section you will set up a JSX preprocessor to convert all your tags automatically. Docs

In other words, just as @Kornflexx mentioned, Just use create-react-app :)

edited Mar 13, 2020 at 11:50

answered Mar 13, 2020 at 11:38

awran5

4,5962 gold badges17 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gerardsson Over a year ago

This answer helped solve the problem. There was a script reference missing for the transcompiler and the render call was missing from js file I also agree with @Kornflexx that in general it is better to use create-react-app. The reason I was looking for the code correction is because I also had to correct other things surrounding the exercice. For running the code I also recommend VS Code LiveServer. I have been using

awran5 Over a year ago

I'm glad that you solved it. Please note that if you care about SEO, CRA wouldn't be your best option, you may consider using Nextjs for SSR or Gatsby for SSG

Collectives™ on Stack Overflow

Javascript react Uncaught SyntaxError: Unexpected token '<' or Syntax error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related