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   lt     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

User · Answer

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

User · Answer

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  lt LikeOrNot   gt   document getElementById  main-content       And don t forget add  lt div id  main-content  gt  lt  div gt  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

User · Answer

in my case  i had failed to include the type attribute on my script tag    lt script type  text jsx  gt

User · Answer

Although  I had all proper babel loaders in my  babelrc config file  This build script with parcel-bundler was producing the unexpected token error  lt  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

User · Answer

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

User · Answer

I just started learning React today and was facing the same problem  Below is the code I had written      lt script type  text babel  gt      class Hello extends React Component           render                return                    lt div gt                       lt h1 gt Hello World lt  h1 gt                   lt  div gt                                    ReactDOM render           lt Hello  gt          document getElementById  react-container            lt  script gt    And as you can see that I had missed a comma     after I use  lt Hello  gt   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

User · Answer

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  lt script gt  tags  you need those included for JSX to work in the browser

User · Answer

heres another way you can do it html         lt head gt       lt title gt Parcel Sandbox lt  title gt       lt meta charset  UTF-8    gt   lt  head gt    lt body gt        lt div id  app  gt  lt  div gt        lt script src  src index js  gt  lt  script gt   lt  body gt    lt  html gt    index js file with path src index js  import React from  react   import   render   from  react-dom    import    styles scss    const App        gt       lt div gt       lt h1 gt Hello test lt  h1 gt     lt  div gt      render  lt App   gt   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

User · Answer

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

User · Answer

Here is a working example from your jsbin   HTML    lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src    fb me react-with-addons-0 9 0 js  gt  lt  script gt   lt meta charset utf-8   gt   lt title gt JS Bin lt  title gt   lt  head gt   lt body gt     lt div id  main-content  gt  lt  div gt   lt  body gt   lt  html gt    jsx    lt script type  text jsx  gt       jsx React DOM    var LikeOrNot   React createClass       render  function            return            lt p gt Like lt  p gt                      React renderComponent  lt LikeOrNot   gt   document getElementById  main-content      lt  script gt    Run this code from a single file and your it should work

User · Answer

The issue Unexpected token   lt   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

User · Answer

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    lt  DOCTYPE html gt   lt html gt   lt head gt   lt meta charset utf-8   gt   lt title gt JS Bin lt  title gt   lt  head gt   lt body gt     lt div id  main-content  gt  lt  div gt   lt script src  CDN link to react-15 1 0 js  gt  lt  script gt   lt script src  CDN link to react-dom-15 1 0 js  gt  lt  script gt    lt  body gt   lt  html gt    JS code   var LikeOrNot   React createClass       render  function            return            lt li gt Like lt  li gt                      ReactDOM render  lt LikeOrNot   gt                   document getElementById  main-content       Hope this solves your issue   -

User · Answer

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

User · Answer

I solved it using type    text babel    lt script src  js reactjs main js  type    text babel  gt  lt  script gt

User · Answer

In my case  besides the babel presets  I also had to add this to my  eslintrc        extends    react-app

User · Answer

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

User · Answer

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

[reactjs] Reactjs: Unexpected token '<' Error

Examples related to reactjs