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

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?

**2019 update**: Adding `type="text/babel"`to the script tag where I'm importing my JS file and the Babel script that @Steven mentioned in the comment above worked for me. — Syknapse, Dec 01 '19 at 12:24

score 194 · Accepted Answer · edited Dec 17 '19 at 02:28

194

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!

edited Dec 17 '19 at 02:28

workerbee

57
8

answered Jan 23 '15 at 00:16

kat

5,645
4
19
35

3

`python -m SimpleHTTPServer 8080` is commonly used because you don't have to install, run, and configure a persistent server like apache. – Brigand Jan 23 '15 at 02:50
3

Works perfectly, I just added the `text/jsx` attribute value – William Sep 25 '15 at 19:32
With the update to `type="text/babel"`, use this script for transforming the JSX while in development mode: `` – Jeff M Jul 16 '21 at 13:45
React 18 removed the `` tag. Any updates? – Normal Feb 28 '23 at 18:20

score 35 · Answer 2 · answered May 12 '16 at 20:01

35

JSTransform is deprecated , please use babel instead.

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

answered May 12 '16 at 20:01

Pumych

1,368
3
18
31

score 25 · Answer 3 · edited Mar 20 '18 at 14:21

25

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

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

edited Mar 20 '18 at 14:21

Brad Koch

19,267
19
110
137

answered Apr 04 '16 at 07:06

NAVIN SINGH BISHT

259
3
2

score 18 · Answer 4 · answered Feb 28 '17 at 14:33

18

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>

answered Feb 28 '17 at 14:33

AlexGH

2,735
5
43
76

6

For version 6: `` as mentioned [on here](https://github.com/babel/babel-standalone#usage "babel-standalone usage") – Megidd Jul 07 '17 at 11:15
This is the best answer – xpmatteo Aug 04 '22 at 08:47

score 4 · Answer 5 · answered Apr 06 '16 at 09:41

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

score 4 · Answer 6 · edited Jul 06 '17 at 09:48

4

If you are getting an error like this :

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

It could be you are missing a curly bracket

edited Jul 06 '17 at 09:48

CalvT

3,123
6
37
54

answered Jul 06 '17 at 07:46

Lord Darth Vader

1,895
1
17
26

stewart715 · Answer 7 · 2015-01-22T23:52:09.663

3

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

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

edited Jan 22 '15 at 23:52

answered Jan 22 '15 at 23:38

stewart715

5,557
11
47
80

tried it, now I'm just getting "Uncaught SyntaxError: Unexpected token ILLEGAL" – kat Jan 22 '15 at 23:42
are you using chrome? does it give you a line number and point to specific code? – stewart715 Jan 22 '15 at 23:43
my bad, can't do line breaks without escaping them so you need to concat them with `+` ...updated should work now. – stewart715 Jan 22 '15 at 23:45
Now I'm getting this: "Uncaught Error: Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object." seems like a string isn't a valid react component – kat Jan 22 '15 at 23:48
Ah I know what's going on here...you need to compile your jsx react code into javascript...are you doing that or running directly in browser? – stewart715 Jan 22 '15 at 23:51
Ideally this would be as part of some build before deploying your code. – stewart715 Jan 22 '15 at 23:53
awesome! so I thought that adding `/** @jsx React.DOM*/` to my js file and `` to my HTML file would cause that to happen automatically. Is that not so? – kat Jan 22 '15 at 23:56
ok i just realized that I needed to add `type="text/jsx"` to the script tag, but now I'm getting MORE errors. Will detail them above – kat Jan 23 '15 at 00:02

score 3 · Answer 8 · answered Sep 22 '21 at 16:45

3

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>

answered Sep 22 '21 at 16:45

CameronP

305
2
10

score 1 · Answer 9 · answered May 28 '17 at 09:44

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

score 1 · Answer 10 · answered Sep 22 '21 at 16:44

1

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

answered Sep 22 '21 at 16:44

CameronP

305
2
10

score 0 · Answer 11 · answered Jun 16 '20 at 16:50

0

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

answered Jun 16 '20 at 16:50

Dee Jee

101
1
10

The original question did not use express.js; may you explain how does this fix the issue? – Jonathan Rosa Jun 16 '20 at 18:45

harsh · Answer 12 · 2023-09-02T18:00:55.857

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.

score 0 · Answer 13 · answered Mar 12 '23 at 00:45

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>

ReactJS: "Uncaught SyntaxError: Unexpected token <"

13 Answers13

Solution

Linked

Related