Can't get Browserify working with ReactJS. I'm running with watchify, although browserify does same thing:
watchify -t reactify app2.js -o ../build/app-brow.js
The browser console shows this error in mywidget.js:
Uncaught SyntaxError: Unexpected token <
app2.js
/** @jsx React.DOM */
var MyShow = require('./mywidget').MyWidget;
var myApp = React.createClass({
render: function() {
return (
<div>
MyShow: <MyShow />
<LocalWidget />
</div>
);
}
});
React.renderComponent((
<myApp />
), document.body);
mywidget.js
var MyWidget = React.createClass({
render: function() {
return (
<div>
Testing "require MyWidget" Captain
</div>
);
}
});
module.exports = MyWidget;
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<script src=".11.1.js"></script>
<script src=".11.1.js"></script>
<script src=".js/2.1.14/require.js"></script>
</head>
<body>
This shows, but ReactJS shows errors in browser, console.
<div id="content"></div>
<script type="text/javascript" src="build/app-brow.js"></script>
</body>
</html>
Can't get Browserify working with ReactJS. I'm running with watchify, although browserify does same thing:
watchify -t reactify app2.js -o ../build/app-brow.js
The browser console shows this error in mywidget.js:
Uncaught SyntaxError: Unexpected token <
app2.js
/** @jsx React.DOM */
var MyShow = require('./mywidget').MyWidget;
var myApp = React.createClass({
render: function() {
return (
<div>
MyShow: <MyShow />
<LocalWidget />
</div>
);
}
});
React.renderComponent((
<myApp />
), document.body);
mywidget.js
var MyWidget = React.createClass({
render: function() {
return (
<div>
Testing "require MyWidget" Captain
</div>
);
}
});
module.exports = MyWidget;
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<script src="http://fb.me/react-0.11.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
<script src="http://cdnjs.cloudflare./ajax/libs/require.js/2.1.14/require.js"></script>
</head>
<body>
This shows, but ReactJS shows errors in browser, console.
<div id="content"></div>
<script type="text/javascript" src="build/app-brow.js"></script>
</body>
</html>
-
I thought it may be missing
/** @jsx React.DOM */frommywidget.jsbut no work. Also tried addingvar React = require('react');to .js files, still no go! – Giant Elk Commented Jul 30, 2014 at 22:27 -
If you want to use the in-browser transformer you need to specify
type="text/jsx", though it sounds like that's not your intention here. (In that case, you don't need JSXTransformer.js.) – Sophie Alpert Commented Jul 30, 2014 at 22:46 - 1 A bit OT, have a look at my React + browserify + gulp template: gist.github./fkling/e34147a800b085a17563 – Felix Kling Commented Jul 30, 2014 at 22:50
- By the way, RequireJS/AMD is something different, you're using browserify/CommonJS. – Brigand Commented Jul 30, 2014 at 22:51
-
I'm including RequireJS in
index.htmlin this tag:<script src="http://cdnjs.cloudflare./ajax/libs/require.js/2.1.14/require.js">. Do you mean Browserify turns RequireJS into CommonJS modules? – Giant Elk Commented Jul 31, 2014 at 1:59
2 Answers
Reset to default 4In mywidget.js you have this:
module.exports = MyWidget;
When you require a file, you get the value of module.exports.
So this line is effectively doing MyWidget.MyWidget, which is undefined.
var MyShow = require('./mywidget').MyWidget;
You should just remove the .MyWidget at the end.
var MyShow = require('./mywidget');
You're also missing /** @jsx React.DOM */ in the mywidget.js file, which is causing the SyntaxError.
Side note: remove JSXTransformer, you don't need it because you're using reactify.
I have made a basic ponent of ReactJS using gulp and browserfy. This blog may help you to make React ponent HelloReactComponent
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745664482a4639041.html
评论列表（0条）