Uncaught SyntaxError: Unexpected token < with React

Question

I am very much new to React. The following is my first script.

But I am getting the following error.

Uncaught SyntaxError: Unexpected token <

I have even searched through google/SO. But I couldn't get it to work.

<!DOCTYPE html>
<html>
<head>
    <title>First React App</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script  src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>  
</head>
<body>
    <div id="app">

    </div>
    <script>
        const name = 'John doe'
        const handle = '@john_doe'

        function NameComponent (props){
            return <h1>{props.name}</h1>;//The problem is here using JSX syntax
        }

        function HandleComponent(props){
            return <h3>{props.handle}</h3>;
        }

        function App(){
            return (
                <div id="container">
                    <NameComponent name={name}/>
                    <HandleComponent handle={handle}/>
                </div>
            );
        }


        ReactDOM.render(<App />,document.getElementById('app'));
    </script>
</body>
</html>

You need to run the script through Babel to transpile the JSX to JS - browsers don't understand JSX even with the React libraries (because, well, JSX isn't JS, and browsers only understand JS) — CertainPerformance
– CertainPerformance, Commented Jan 1, 2019 at 10:13
I don't know how you setup reactJs in your local PC but if you're starting from 0 then it'll gone be bad dream for you. so I encourage you to start with this link. github.com/facebook/create-react-app — Dhaval
– Dhaval, Commented Jan 1, 2019 at 10:17

maazadeeb · Accepted Answer · 2022-04-23 19:32:49Z

7

To make your code work as it is currently, you just need to add type="text/babel" to the script tag that contains the code that you intend to transpile using babel.

From the babel docs:

When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx

Working code with just this change

<html>
<head>
    <title>First React App</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script  src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>  
</head>
<body>
    <div id="app">

    </div>
    <script type="text/babel">
        const name = 'John doe'
        const handle = '@john_doe'

        function NameComponent (props){
            return <h1>{props.name}</h1>;//The problem is here using JSX syntax
        }

        function HandleComponent(props){
            return <h3>{props.handle}</h3>;
        }

        function App(){
            return (
                <div id="container">
                    <NameComponent name={name}/>
                    <HandleComponent handle={handle}/>
                </div>
            );
        }


        ReactDOM.render(<App />,document.getElementById('app'));
    </script>
</body>
</html>

Though this works, using create-react-app or codesandbox is generally much simpler for beginners.

edited Apr 23, 2022 at 19:32

answered Jan 1, 2019 at 10:32

maazadeeb

6,1122 gold badges32 silver badges41 bronze badges

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

2 Comments

Dushyant Joshi Over a year ago

Excellent. While other answers are also correct, this gave me the working script as I am very much newer. Thanks

T.J. Crowder Over a year ago

@DushyantJoshi - Do take note of the warning in the documentation: "Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side."

Canastro · Accepted Answer · 2019-01-01 10:16:03Z

2

In order to have a bare minimum setup with react (with no compilation step), you need either to use React.createElement syntax instead of JSX tags (check https://reactjs.org/docs/add-react-to-a-website.html), or use something like htm

Personally I would just use Create React App to help with the initial setup. This will configure babel (among a lot of other things) for you and do the proper JSX transpilation. Although in the future it will be good for you to know exactly whats under the hood of create-react-app and maybe make your own setup.

answered Jan 1, 2019 at 10:16

Canastro

3,00934 silver badges41 bronze badges

Comments

JW Geertsma · Accepted Answer · 2021-12-17 10:59:47Z

1

Simply install babel using npm with this command:

npm install --save @babel/standalone

Also include this line in your HTML file:

<script type="text/babel" src="like_button.js"></script>

Example code:

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" src="like_button.js"></script>

edited Dec 17, 2021 at 10:59

JW Geertsma

8753 gold badges18 silver badges22 bronze badges

answered Dec 17, 2021 at 9:33

arulkumar98

111 bronze badge

Comments

Rucksolly · Accepted Answer · 2023-02-20 18:32:41Z

0

if you have script tag in your index.html give it a type="text/babel"

If that didn't fix it try: Removing the homepage line entirely from the package.json in the react app directory fixed it somehow.

answered Feb 20, 2023 at 18:32

Rucksolly

112 bronze badges

Collectives™ on Stack Overflow

Uncaught SyntaxError: Unexpected token < with React

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related