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?
This question is related to
javascript
html
reactjs
react-jsx
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/[email protected]/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>
)
}
});
The code you have is correct. JSX code needs to be compiled to JS:
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.
Remove the cached files. By clearing the browser history in a span of 1 hour, so that all the cached files get deleted.
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']
}
},
If you are getting an error like this :
SyntaxError: embedded: Unexpected token (107:9) 105
It could be you are missing a curly bracket
JSTransform is deprecated , please use babel instead.
<script type="text/babel" src="./lander.js"></script>
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 });
});
Source: Stackoverflow.com