ReactJS: "Uncaught SyntaxError: Unexpected token <"

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!

JSTransform is deprecated , please use babel instead.

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

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

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

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>

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

If you are getting an error like this :

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

It could be you are missing a curly bracket

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

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

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>

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

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

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

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.