Reactjs: Unexpected token '<' Error

Question

i am just starting with Reactjs and was writing a simple component to display
li tag and came across this error:

Unexpected token '<'

I have put the example at jsbin below http://jsbin.com/UWOquRA/1/edit?html,js,console,output

Please let me know what i am doing wrong.

score 70 · Answer 1 · answered Nov 02 '15 at 15:46

70

I solved it using type = "text/babel"

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

answered Nov 02 '15 at 15:46

Yuliia Ashomok

8,336
2
60
69

1

That's correct, use "text/babel" instead of "text/jsx". Reference the babel core url -> https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js – Kent Aguilar Dec 18 '15 at 19:05

Sophie Alpert · Answer 2 · 2014-11-22T08:33:04.847

31

UPDATE: In React 0.12+, the JSX pragma is no longer necessary.

Make sure include the JSX pragma at the top of your files:

/** @jsx React.DOM */

Without this line, the jsx binary and in-browser transformer will leave your files unchanged.

edited Nov 22 '14 at 08:33

answered Jan 03 '14 at 22:18

Sophie Alpert

139,698
36
220
238

10

But – xavier Aug 09 '15 at 03:14
4

using babel I had to throw in `type="text/babel"`. Brave new world of javascript – Connor Leech Oct 14 '15 at 18:46
this helped in my circumstances: http://stackoverflow.com/questions/33460420/babel-loader-jsx-syntaxerror-unexpected-token?answertab=votes#tab-top – timhc22 Nov 23 '15 at 19:14

score 31 · Answer 3 · edited Feb 15 '20 at 21:32

31

The issue Unexpected token '<' is because of missing the babel preset.

Solution : You have to configure your webpack configuration as follows

{
  test   : /\.jsx?$/,
  exclude: /(node_modules|bower_components)/,
  loader : 'babel',
  query  : {
    presets:[ 'react', 'es2015' ]
  }
}

here .jsx checks both .js and .jsx formats.

you can simply install the babel dependency using node as follows

npm install babel-preset-react

Thank you

edited Feb 15 '20 at 21:32

jbarros

628
10
28

answered Jun 03 '16 at 07:07

Nuwa

461
4
10

There's nothing in the question indicating that the original poster is using babel. – ivarni Jun 03 '16 at 07:14
He said he is just starting with Reactjs , for React babel preset have to be use.May be the webpack configuration missed the babel preset – Nuwa Jun 03 '16 at 08:06
There's nothing in the question indicating the the original poster is using webpack either. Neither of those are required for working with React although they are both handy. – ivarni Jun 03 '16 at 08:14
4

@Nuwa thank you. `npm install babel-preset-react` solved my problem. – Yasin Yörük Feb 22 '17 at 08:06
5

if you have `.babelrc` file in the project just `"presets": ["env", "react", "es2015"]` and that's it!! – Byron Lopez May 29 '17 at 17:28
I have experience some alternative way that cause this issue, normally there is a index.html file to embed the react bundle file like but we are not emphasis the type, it will gives the same error log.So good to define the file type also. @julestruong – Nuwa Mar 26 '18 at 12:46
If the error occurs in a self-made node_module that I have installed, do I have to do this in my installed module or in the project that I have installed this module? – yemerra Jan 07 '19 at 17:21

score 24 · Answer 4 · answered Aug 22 '15 at 17:06

24

in my case, i had failed to include the type attribute on my script tag.

<script type="text/jsx">

answered Aug 22 '15 at 17:06

Sean M

1,990
20
16

score 8 · Answer 5 · answered Nov 29 '17 at 13:36

8

I have this error and could not solve this for two days.So the fix of error is very simple. In body ,where you connect your script, add type="text/jsx" and this`ll resolve the problem.

answered Nov 29 '17 at 13:36

Руслан

675
7
8

can you also give an explanation for your answer? – MMascarin Sep 17 '19 at 15:33
1

I think when you give type="text/jsx" you worn compiler to know what type of document or file this is. – Руслан Dec 24 '19 at 07:08

score 7 · Answer 6 · answered Jan 03 '14 at 14:03

7

You need to either transpile/compile that JSX code to javascript or use the in-browser transformator

Look at http://facebook.github.io/react/docs/getting-started.html and take note of the <script> tags, you need those included for JSX to work in the browser.

answered Jan 03 '14 at 14:03

krs

4,096
19
22

Yes i know, below is the updated jsbin [link](http://jsbin.com/UWOquRA/5/edit?html,js,console,output) – sam Jan 03 '14 at 14:27
That jsbin seems to have their own way of executing the JS, the error is from within their code. – krs Jan 03 '14 at 14:56
But it is the same error and at same line number. Also, is there any other reason why such an error will happen if i am using the same code as provided in the [link](http://jsbin.com/UWOquRA/5/edit?html,js,console,output) – sam Jan 03 '14 at 15:12
http://jsfiddle.net/9st5Q/ here is your code in a jsfiddle, where React works fine. – krs Jan 03 '14 at 15:21
Seems to me there is something wrong with the 0.8 version as it gives me this error again and again. Thanks for clarifying. – sam Jan 03 '14 at 15:33
its not wrong in React, its jsbin that reads the textarea and evaluates the code, React-transformer does not get a chance to transform it. – krs Jan 03 '14 at 15:34
But it happens with my local file to. Even if i run as plain html file or as a nodejs app – sam Jan 03 '14 at 15:37
8

make sure you set the **type="text/jsx"** in ` – krs Jan 03 '14 at 15:39
I was using the starter kit that's when i started having problem. Just now i changed to cdn js files and it is working fine now. – sam Jan 03 '14 at 15:51

score 3 · Answer 7 · answered May 01 '14 at 19:13

Here is a working example from your jsbin:

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.9.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="main-content"></div>
</body>
</html>

jsx:

<script type="text/jsx">
/** @jsx React.DOM */
var LikeOrNot = React.createClass({
    render: function () {
      return (
        <p>Like</p>
      );
    }
});

React.renderComponent(<LikeOrNot />, document.getElementById('main-content'));
</script>

Run this code from a single file and your it should work.

score 3 · Answer 8 · answered May 17 '20 at 18:02

3

Check if .babelrc is inside your application root folder, not inside a subfolder. if that's the case move file to root.

answered May 17 '20 at 18:02

Andrew Okesokun

31
1

score 2 · Answer 9 · answered Feb 24 '17 at 07:46

if we consider your real site configuration, than you need to run ReactJS in the head

<!-- Babel ECMAScript 6 injunction -->  
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

and add attribute to your js file - type="text/babel" like

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

then the below code example will work:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

score 2 · Answer 10 · answered Jun 14 '18 at 02:05

2

If you're like me and prone to silly mistakes, also check your package.json if it contains your babel preset:

  "babel": {
    "presets": [
      "env",
      "react",
      "stage-2"
    ]
  },

answered Jun 14 '18 at 02:05

pinkwaffles

463
4
12

score 1 · Answer 11 · answered Sep 06 '16 at 07:22

1

For correct tag parsing you'll need to use this babel version : https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js and attribute "type='text/babel'" in the script. Besides, your custom script should be within "body" tags.

answered Sep 06 '16 at 07:22

Kirill Shur

280
2
4

score 1 · Answer 12 · answered Jan 15 '17 at 10:53

You can use code like this:

import React from 'react';
import ReactDOM from 'react-dom';

var LikeOrNot = React.createClass({
    displayName: 'Like',
    render: function () {
      return (
        React.createElement("li", null, "Like")
      );
    }
});
ReactDOM.render(<LikeOrNot />, document.getElementById('main-content'));

And don't forget add <div id='main-content'></div> into the body in your html

But in your package.json file you should use this dependencies:

  "dependencies": {
...
    "babel-core": "^6.18.2",
    "babel-preset-react": "^6.16.0",
...
}
"devDependencies": {
...   
    "babel": "^6.5.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "jsx-loader": "^0.13.2",
...
}

It's work for me but i used webpack also, with this options (into webpack.config.js):

  module: {
    loaders: [
      { 
        test: /\.jsx?$/,         // Match both .js and .jsx files
        exclude: /node_modules/, 
        loader: "babel-loader", 
        query:
        {
          presets: ['es2015', 'react']
        }
      }
    ]
  }

score 1 · Answer 13 · answered Sep 04 '17 at 06:02

Use the following code. I have added reference to React and React DOM. Use ES6/Babel to transform you JS code into vanilla JavaScript. Note that Render method comes from ReactDOM and make sure that render method has a target specified in the DOM. Sometimes you might face an issue that the render() method can't find the target element. This happens because the react code is executed before the DOM renders. To counter this use jQuery ready() to call the render() method of React. This way you will be sure about DOM being rendered first. You can also use defer attribute on your app script.

HTML code:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id='main-content'></div>
<script src="CDN link to/react-15.1.0.js"></script>
<script src="CDN link to/react-dom-15.1.0.js"></script>

</body>
</html>

JS code:

var LikeOrNot = React.createClass({
    render: function () {
      return (
        <li>Like</li>
      );
    }
});

ReactDOM.render(<LikeOrNot />,
                document.getElementById('main-content'));

Hope this solves your issue. :-)

score 1 · Answer 14 · answered Dec 06 '18 at 19:35

heres another way you can do it html

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
     <div id="app"></div>

    <script src="src/index.js"></script>
</body>

</html>

index.js file with path src/index.js

import React from "react";
import { render } from "react-dom";

import "./styles.scss";

const App = () => (
  <div>
    <h1>Hello test</h1>
  </div>
);

render(<App />, document.getElementById("app"));

use this package.json will get u up and running quickly

{
  "name": "test-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "react-native": "0.57.5"
  },
  "devDependencies": {
    "@types/react-native": "0.57.13",
    "parcel-bundler": "^1.6.1"
  },
  "keywords": []
}

score 0 · Answer 15 · answered Feb 06 '17 at 13:52

0

In my case, besides the babel presets, I also had to add this to my .eslintrc:

{
  "extends": "react-app",
  ...
}

answered Feb 06 '17 at 13:52

dferrazm

643
5
10

score 0 · Answer 16 · answered Jan 23 '19 at 22:22

Although, I had all proper babel loaders in my .babelrc config file. This build script with parcel-bundler was producing the unexpected token error < and mime type errors in the browser console for me on manual page refresh.

"scripts": {
    "build": "parcel build ui/index.html --public-url ./",
    "dev": "parcel watch ui/index.html"
 }

Updating the build script fixed the issues for me.

"scripts": {
    "build": "parcel build ui/index.html",
    "ui": "parcel watch ui/index.html"
 }

score 0 · Answer 17 · answered Jun 26 '22 at 14:42

0

Maybe this can help,this worked for me in production. In your package.json file add homepage : address to your webpage just like the code below

"name": "client",
"version": "0.1.0",
"homepage": "abc.org", 
"private": true,

answered Jun 26 '22 at 14:42

Ujjwal Rustagi

1

Tarun_vella · Answer 18 · 2023-08-27T03:08:46.767

For all those beginners who are trying to understand the concept but blown their mind in loading react without html script injection

here is my completed PR: https://github.com/tarunvella/react-learning/pull/3

hope this helps everyone that using webpack we can achieve bootstrapping react in root index.js with a index.html placed in public folder with your desired html node

everything is controlled by the bundler , so the bundler will inject the script tag from

<script defer="defer" src="/static/js/main.582af011.js"></script>

in head

below is how index.html body looks like in public folder during development

  <body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="react">React not rendered</div>

<!-- excluding html script injection -->

<!-- 
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script> -->
<!-- <script type="module" src="app.js"></script> -->
<!-- <script type="text/javascript" src="/Client/public/core.js"></script> -->

score -1 · Answer 19 · answered Oct 08 '18 at 12:33

I just started learning React today and was facing the same problem. Below is the code I had written.

<script type="text/babel">
    class Hello extends React.Component {
        render(){
            return (
                <div>
                    <h1>Hello World</h1>
                </div>
            )
        }
    }
    ReactDOM.render(
        <Hello/>
        document.getElementById('react-container')
    )


</script>

And as you can see that I had missed a comma (,) after I use <Hello/>. And error itself is saying on which line we need to look.

So once I add a comma before the second parameter for the ReactDOM.render() function, all started working fine.

Reactjs: Unexpected token '<' Error

19 Answers19

Linked

Related