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?

You need to additionally add the following script code. <script src="unpkg.com/@babel/standalone/babel.min.js"></script> — Steven
– Steven, Commented Nov 2, 2019 at 4:05
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
– Syknapse, Commented Dec 1, 2019 at 12:24

workerbee · Accepted Answer · 2019-12-17 02:28:11Z

203

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, 2019 at 2:28

workerbee

578 bronze badges

answered Jan 23, 2015 at 0:16

kat

5,9805 gold badges25 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Brigand Over a year ago

python -m SimpleHTTPServer 8080 is commonly used because you don't have to install, run, and configure a persistent server like apache.

William Over a year ago

Works perfectly, I just added the text/jsx attribute value

Jeff M Over a year ago

With the update to type="text/babel", use this script for transforming the JSX while in development mode: <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Islam Y- Over a year ago

React 18 removed the <script /> tag. Any updates?

Pumych · Accepted Answer · 2016-05-12 20:01:29Z

35

JSTransform is deprecated , please use babel instead.

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

answered May 12, 2016 at 20:01

Pumych

1,4083 gold badges20 silver badges33 bronze badges

Comments

Brad Koch · Accepted Answer · 2018-03-20 14:21:36Z

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, 2018 at 14:21

Brad Koch

20.5k21 gold badges114 silver badges141 bronze badges

answered Apr 4, 2016 at 7:06

NAVIN SINGH BISHT

2593 silver badges2 bronze badges

Comments

AlexGH · Accepted Answer · 2017-02-28 14:33:13Z

18

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>

answered Feb 28, 2017 at 14:33

AlexGH

2,8376 gold badges48 silver badges84 bronze badges

2 Comments

Megidd Over a year ago

For version 6: <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> as mentioned on here

xpmatteo Over a year ago

This is the best answer

e18r · Accepted Answer · 2016-04-06 09:41:04Z

4

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

answered Apr 6, 2016 at 9:41

e18r

8,3314 gold badges48 silver badges40 bronze badges

1 Comment

Zoltán Over a year ago

Instant solution .)

CalvT · Accepted Answer · 2017-07-06 09:48:56Z

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 6, 2017 at 9:48

CalvT

3,2336 gold badges40 silver badges55 bronze badges

answered Jul 6, 2017 at 7:46

Lord Darth Vader

2,0251 gold badge19 silver badges27 bronze badges

Comments

stewart715 · Accepted Answer · 2015-01-22 23:52:09Z

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, 2015 at 23:52

answered Jan 22, 2015 at 23:38

stewart715

5,67711 gold badges49 silver badges81 bronze badges

8 Comments

kat Over a year ago

tried it, now I'm just getting "Uncaught SyntaxError: Unexpected token ILLEGAL"

stewart715 Over a year ago

are you using chrome? does it give you a line number and point to specific code?

stewart715 Over a year ago

my bad, can't do line breaks without escaping them so you need to concat them with + ...updated should work now.

kat Over a year ago

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

stewart715 Over a year ago

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?

|

CameronP · Accepted Answer · 2021-09-22 16:45:58Z

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, 2021 at 16:45

CameronP

3052 silver badges10 bronze badges

Comments

prabhatojha · Accepted Answer · 2017-05-28 09:44:56Z

1

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

answered May 28, 2017 at 9:44

prabhatojha

2,1051 gold badge18 silver badges32 bronze badges

Comments

CameronP · Accepted Answer · 2021-09-22 16:44:43Z

1

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

answered Sep 22, 2021 at 16:44

CameronP

3052 silver badges10 bronze badges

Comments

Dee Jee · Accepted Answer · 2020-06-16 16:50:31Z

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, 2020 at 16:50

Dee Jee

1111 silver badge10 bronze badges

1 Comment

user20460317 Over a year ago

The original question did not use express.js; may you explain how does this fix the issue?

Nanhe Kumar · Accepted Answer · 2023-03-12 00:45:59Z

0

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>

answered Mar 12, 2023 at 0:45

Nanhe Kumar

16.4k5 gold badges84 silver badges72 bronze badges

Comments

harsh · Accepted Answer · 2023-09-02 18:00:55Z

0

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.

edited Sep 2, 2023 at 18:00

answered Jan 16, 2021 at 7:13

harsh

612 silver badges8 bronze badges

Collectives™ on Stack Overflow

ReactJS: "Uncaught SyntaxError: Unexpected token <"

13 Answers 13

4 Comments

Comments

Comments

2 Comments

1 Comment

Comments

8 Comments

Comments

Comments

Comments

1 Comment

Comments

Solution

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

4 Comments

Comments

Comments

2 Comments

1 Comment

Comments

8 Comments

Comments

Comments

Comments

1 Comment

Comments

Solution

Comments

Linked

Related