Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Uncaught SyntaxError: Unexpected token < #40

Closed
rtpdevelopers opened this issue Jun 2, 2013 · 9 comments
Closed

Uncaught SyntaxError: Unexpected token < #40

rtpdevelopers opened this issue Jun 2, 2013 · 9 comments

Comments

@rtpdevelopers
Copy link

Even with the most basic tutorial code, I'm unable to get past this error thrown at JSXTransformer.js:46.

Error Trace:

Uncaught SyntaxError: Unexpected token < JSXTransformer.js:46
exports.run JSXTransformer.js:46
execute JSXTransformer.js:101
runScripts

Full source:

<html>
  <head>
    <title>Hello React</title>
    <script src="react.min.js"></script>
    <script src="JSXTransformer.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
        var CommentBox = React.createClass({
          render: function() {
            return (
              <div class="commentBox">
                Hello, world! I am a CommentBox.
              </div>
            );
          }
        });
        React.renderComponent(
          <CommentBox />,
          document.getElementById('content')
        );
    </script>
  </body>
</html>

Running Chrome 27.0.1453.93, issue also appears in Firefox 21.
@zpao
Copy link
Member

zpao commented Jun 2, 2013

Indeed. This is deceptive and you got a really bad error message. We need to fix that (amongst other things).

Right now scripts need to be prefixed with a docblock to assist the transformer. The fact that it's missing here is causing it to not recognize that it should be converting to JSX. We very much want to fix this ASAP. Sorry that it's causing you issues!

In the mean time, just prefixing your code with this docblock should fix your problem. Please close this out if it does.

/**
 * @jsx React.DOM
 */

or the condensed version will work too

/** @jsx React.DOM */

@aarongrando
Copy link

This works, thanks tremendously.

@homleen
Copy link

homleen commented Jun 20, 2013

Meet this problem too. Maybe it should be warned in the documentation.

@petehunt
Copy link
Contributor

Follow up: we've updated to stress this in several places. Hopefully it's okay now.

@bthibault
Copy link

wow, took me a while to track this down . Can we just fix this the right way?

@sophiebits
Copy link
Collaborator

I'd like to change the default file extension to .jsx and then transform JSX regardless of if the docblock is present; see #832.

@bthibault
Copy link

+1

@NSAKHAN
Copy link

NSAKHAN commented Jul 15, 2014

Tried with new version .11.rc, seems no fix in this version! Am I missing something?

<script src="http://fb.me/react-0.11.0-rc1.js"></script> <script src="http://fb.me/JSXTransformer-0.11.0-rc1.js"></script>

@syranide
Copy link
Contributor

@NSAKHAN It's not supposed to work (right now), you're trying to return multiple components for the root, you can only return one.

EDIT: Oh wait, this was for the docblock, you need to add /** @jsx React.DOM */ at the top of your files.

@ustadkhan ustadkhan mentioned this issue Mar 26, 2019
Closed
taneliang referenced this issue in MLH-Fellowship/react Aug 17, 2020
@taneliang
[Canvas V2][5/n] Improve getHoveredEvent clarity (#40)
0115c19
taneliang referenced this issue in MLH-Fellowship/react Aug 19, 2020
@taneliang
[Canvas V2][5/n] Improve getHoveredEvent clarity (#40)
cc0dec3
lunaruan pushed a commit to bvaughn/react that referenced this issue Jun 15, 2021
@MylesBorins
server: use fs.promises instead of fs/promises (facebook#40)
4ecf1f2 
With this change, as well as a change to react-fs, this repo will be able to support Node.js 12 (tested locally).

I can't seem to find the repo for react-fs though to propose the change ¯\_(ツ)_/¯
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@sophiebits @zpao @aarongrando @petehunt @syranide @rtpdevelopers @bthibault @homleen @NSAKHAN