[Solved]-Reactjs: Unexpected token '<' Error-Reactjs

score:0

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']
        }
      }
    ]
  }

Vitalii Andrusishyn 3464

score:0

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

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

dferrazm 594

score:0

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.

Sibeesh Venu 15183

score:0

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": []
}

Snivio 1507

score:0

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"
 }

Abhijeet 697

score: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.

Kirill Shur 280

score:1

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')
);

Roman 15348

score:1

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. :-)

Abhay Shiro 2885

score: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"
    ]
  },

pinkwaffles 343

score:2

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

Andrew Okesokun 21

score:3

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.

myusuf 11083

score: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.

krs 3808

score: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.

Руслан 637

score:22

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

<script type="text/jsx">

Sean M 1822

score:30

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.

Sophie Alpert 133990

score: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

Nuwa 451

score:65

I solved it using type = "text/babel"

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

Yuliia Ashomok 7803

[Solved]-Reactjs: Unexpected token '<' Error-Reactjs

Related Query

More Query from same tag