CODEWITHSUNDEEP
javascripthtmlreactjs
kat
kat

Reputation: 5950

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>

JS

/**
 * @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?

Upvotes: 159

Views: 302360

Answers (13)

harsh
harsh

Reputation: 51

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.

Upvotes: 0

Nanhe Kumar
Nanhe Kumar

Reputation: 16307

Babel is a JavaScript transpiler. Babel turns ES6 code into ES5 code.

Another handy feature of Babel is that it understands JSX. Babel compiles our JSX into vanilla ES5 JS that our browser can then interpret and execute. We just need to instruct the browser that we want to use Babel to compile and run our JavaScript code.

Add attribute type="text/babel"

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

Upvotes: 0

CameronP
CameronP

Reputation: 305

In my case, using src="./<file>.js" didn't work. Using %PUBLIC_URL% did the trick.

<script defer async src="%PUBLIC_URL%/some-file.js"></script>

Upvotes: 3

CameronP
CameronP

Reputation: 305

In my case, using src="./<file>.js" didn't work. Using `%PUBLIC_URL%

Upvotes: 1

Dee Jee
Dee Jee

Reputation: 111

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) => {
  res.sendFile("index.html", { root });
});

Upvotes: 0

kat
kat

Reputation: 5950

UPDATE -- use this instead:

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

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:

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

Upvotes: 203

NAVIN SINGH BISHT
NAVIN SINGH BISHT

Reputation: 259

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

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

Upvotes: 25

Lord Darth Vader
Lord Darth Vader

Reputation: 2005

If you are getting an error like this :

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

It could be you are missing a curly bracket

Upvotes: 4

prabhatojha
prabhatojha

Reputation: 2085

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

Upvotes: 1

AlexGH
AlexGH

Reputation: 2817

Add type="text/babel" to the script that includes the .jsx file and add this: <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

Upvotes: 18

Pumych
Pumych

Reputation: 1398

JSTransform is deprecated , please use babel instead.

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

Upvotes: 35

e18r
e18r

Reputation: 8191

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

Upvotes: 4

stewart715
stewart715

Reputation: 5637

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

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

Upvotes: 3

Related Questions