ReactJS: “Uncaught SyntaxError: Unexpected token

问题

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 <\".

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

<html>
  <head>
    <title>Page</title>
    <script src=\"http://fb.me/react-0.12.2.js\"></script>
    <script src=\"http://fb.me/JSXTransformer-0.12.2.js\"></script>
    <script src=\"http://code.jquery.com/jquery-1.10.0.min.js\"> </script>
    <script src=\"./lander.js\"> </script>
  </head>
  <body>
    <div id=\"content\"></div>
    <script type=\"text/jsx\">
        React.render(
            <Lander />,
            document.getElementById(\'content\')
        );
    </script>
  </body>
</html>

/**
 * @jsx React.DOM
 */
var Lander = React.createClass({
    render: function () {
        var info = \"Lorem ipsum dolor sit amet... \";
        return(
            <div>
                <div className=\"info\">{info}</div>
            </div>
        );
    }
});

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?

回答1:

Add type="text/jsx" to the src attribue of script tag used to include JavaScript file that must be transformed by JSX Transformer, like that:

<script type="text/jsx" src="./lander.js"></script>

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!

回答2:

JSTransform is deprecated , please use babel instead.

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

回答3:

Add type="text/babel" as an attribute of the script tag, like this:

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

回答4:

Add type="text/babel" to the script that includes the .jsx file and add this: <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

回答5:

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: ''};

  }, // <---- DON'T FORGET THE COMMA

  render: function() {
      return (
      <form className="commentForm">
          <input type="text" placeholder="Nombre" />
          <input type="text" placeholder="Qué opina" />
          <input type="submit" value="Publicar" />
      </form>
      )
  }
  });

回答6:

The code you have is correct. JSX code needs to be compiled to JS:

http://facebook.github.io/react/jsx-compiler.html

回答7:

If you are getting an error like this :

SyntaxError: embedded: Unexpected token (107:9) 105

It could be you are missing a curly bracket

回答8:

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

来源：https://stackoverflow.com/questions/28100644/reactjs-uncaught-syntaxerror-unexpected-token

标签

javascript