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, Jan 01 '19 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. https://github.com/facebook/create-react-app — Dhaval, Jan 01 '19 at 10:17

maazadeeb · Accepted Answer · 2022-04-23T19:32:49.283

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.

Excellent. While other answers are also correct, this gave me the working script as I am very much newer. Thanks — Dushyant Joshi, Jan 01 '19 at 10:34
@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."* — T.J. Crowder, Jan 01 '19 at 10:46

score 2 · Answer 2 · answered Jan 01 '19 at 10:16

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.

score 1 · Answer 3 · edited Dec 17 '21 at 10:59

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>

score 0 · Answer 4 · answered Feb 20 '23 at 18:32

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 '23 at 18:32

Rucksolly

11
2

Uncaught SyntaxError: Unexpected token < with React

4 Answers4

Linked

Related