Browserify & ReactJS issue

Question

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.com/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 */ from mywidget.js but no work. Also tried adding var React = require('react'); to .js files, still no go! — Giant Elk
– 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
– Sophie Alpert, Commented Jul 30, 2014 at 22:46
A bit OT, have a look at my React + browserify + gulp template: gist.github.com/fkling/e34147a800b085a17563 — Felix Kling
– Felix Kling, Commented Jul 30, 2014 at 22:50
By the way, RequireJS/AMD is something different, you're using browserify/CommonJS. — Brigand
– Brigand, Commented Jul 30, 2014 at 22:51
I'm including RequireJS in index.html in this tag: <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js">. Do you mean Browserify turns RequireJS into CommonJS modules? — Giant Elk
– Giant Elk, Commented Jul 31, 2014 at 1:59

Brigand · Accepted Answer · 2014-07-30 22:50:37Z

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.

answered Jul 30, 2014 at 22:50

Brigand

86.4k20 gold badges168 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Giant Elk Over a year ago

Got it working! Thanks about removing JSXTransformer script tag, good call!

Md. Masudur Rahman · Accepted Answer · 2015-04-07 06:22:12Z

1

I have made a basic component of ReactJS using gulp and browserfy. This blog may help you to make React component HelloReactComponent

answered Apr 7, 2015 at 6:22

Md. Masudur Rahman

1,09815 silver badges31 bronze badges

Collectives™ on Stack Overflow

Browserify & ReactJS issue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related