Uncaught SyntaxError: Unexpected token

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>

maazadeeb · Accepted Answer

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.

Uncaught SyntaxError: Unexpected token < with React

Tags:

javascript

reactjs

Dushyant Joshi

1 Answers

maazadeeb

Recent Activity

Donate For Us