CODEWITHSUNDEEP
javascriptreactjs
Dushyant Joshi
Dushyant Joshi

Reputation: 3702

Uncaught SyntaxError: Unexpected token < with React

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>

Upvotes: 3

Views: 17794

Answers (4)

Rucksolly
Rucksolly

Reputation: 11

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.

Upvotes: 0

maazadeeb
maazadeeb

Reputation: 6112

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.

Upvotes: 7

arulkumar98
arulkumar98

Reputation: 11

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>

Upvotes: 1

Canastro
Canastro

Reputation: 3009

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.

Upvotes: 2

Related Questions