ReactJS Uncaught SyntaxError Unexpected token

Question

I am trying to get started building a site in ReactJS  However  when I tried to put my JS in a separate file  I started getting this error   Uncaught SyntaxError  Unexpected token  lt     I tried adding      jsx React DOM    to the top of the JS file  but it didn t fix anything  Below are the HTML and JS files  Any ideas as to what is going wrong   HTML   lt html gt     lt head gt       lt title gt Page lt  title gt       lt script src  http   fb me react-0 12 2 js  gt  lt  script gt       lt script src  http   fb me JSXTransformer-0 12 2 js  gt  lt  script gt       lt script src  http   code jquery com jquery-1 10 0 min js  gt   lt  script gt       lt script src    lander js  gt   lt  script gt     lt  head gt     lt body gt       lt div id  content  gt  lt  div gt       lt script type  text jsx  gt          React render               lt Lander   gt               document getElementById  content                   lt  script gt     lt  body gt   lt  html gt    JS          jsx React DOM     var Lander   React createClass       render  function              var info    Lorem ipsum dolor sit amet               return               lt div gt                   lt div className  info  gt  info  lt  div gt               lt  div gt                         EDIT  I realized that I need to add type  text jsx  to the script tag which includes my lander code  However  after adding this and reloading I get this warning    You are using the in-browser JSX transformer  Be sure to precompile your JSX for production - http   facebook github io react docs tooling-integration html jsx    followed by this error    XMLHttpRequest cannot load file    Users     lander js  Cross origin requests are only supported for protocol schemes  http  data  chrome-extension  https  chrome-extension-resource    it seems like there is something else that I need to do in order to get in browser jsx transform working  but I m not sure what it is   EDIT  OOOOH do I need to host it using MAMP or something

User · Answer

The code you have is correct  JSX code needs to be compiled to JS   http   facebook github io react jsx-compiler html

User · Answer

Try adding in webpack  it solved the similar issue in my project  Specially the  presets  part   module        loaders                          test     jsx                include  APP DIR              loader   babel               query                     presets   react   es2015

User · Answer

UPDATE --  use this instead    lt script type  text babel  src    lander js  gt  lt  script gt      Add type  text jsx  as an attribute of the script tag used to include the JavaScript file that must be transformed by JSX Transformer  like that    lt script type  text jsx  src    lander js  gt  lt  script gt    Then you can use MAMP or some other service to host the page on localhost so that all of the inclusions work  as discussed here   Thanks for all the help everyone

User · Answer

I have the same issue with you and I have change something in my server  you might try this  const root   require  path   join   dirname     build    app use express static root    app get       req  res    gt      res sendFile  index html     root

User · Answer

JSTransform is deprecated   please use babel instead    lt script type  text babel  src    lander js  gt  lt  script gt

User · Answer

Add type  text babel  to the script that includes the  jsx file and add this     lt script src  https   npmcdn com babel-core 5 8 38 browser min js  gt  lt  script gt

User · Answer

Add type  text babel  as an attribute of the script tag  like this    lt script type  text babel  src    lander js  gt  lt  script gt

User · Answer

In addition to Dee Jee solution  After trying out his solution  My error never went  I noticed after two days of head scratch  that the browser has cached the files improperly   My browser wasn t able to load the preview of the cached files and status code from express was 301  In the networks tab of the browser dev tools  I get that those files are server from disk cache   Solution Remove the cached files  By clearing the browser history in a span of 1 hour  so that all the cached files get deleted

User · Answer

If you have something like  Uncaught SyntaxError  embedded  Unexpected token   You probably missed a comma in a place like this     var CommentForm   React createClass     getInitialState  function           return  author      text                 lt ---- DON T FORGET THE COMMA    render  function           return          lt form className  commentForm  gt             lt input type  text  placeholder  Nombre    gt             lt input type  text  placeholder  Qu   opina    gt             lt input type  submit  value  Publicar    gt         lt  form gt

User · Answer

If you are getting an error like this       SyntaxError  embedded  Unexpected token  107 9  105   It could be you are missing a curly bracket

[javascript] ReactJS: "Uncaught SyntaxError: Unexpected token <"

Examples related to javascript

Examples related to html

Examples related to reactjs

Examples related to react-jsx