CODEWITHSUNDEEP
javascriptreactjssyntax-error
Gerardsson
Gerardsson

Reputation: 382

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

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>
    );
    }
}

'''

Upvotes: 1

Views: 2430

Answers (1)

awran5
awran5

Reputation: 4546

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 :)

Upvotes: 1

Related Questions