javascript - Browserify & ReactJS issue - Stack Overflow|Programmer puzzle solving

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>

Share Improve this question edited Jul 30, 2014 at 22:48 Brigand 86.3k20 gold badges167 silver badges173 bronze badges asked Jul 30, 2014 at 22:15 Giant Elk 5,6859 gold badges46 silver badges57 bronze badges

I thought it may be missing /** @jsx React.DOM */ from mywidget.js but no work. Also tried adding var 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.html in 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

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

In 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

Programmer puzzle solving

javascript - Browserify & ReactJS issue - Stack Overflow

2 Answers 2

Articles related to this article

comment list (0)