CODEWITHSUNDEEP
javascriptreactjsbrowserify
Giant Elk
Giant Elk

Reputation: 5685

Browserify & ReactJS issue

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>

Upvotes: 3

Views: 3665

Answers (2)

Md. Masudur Rahman
Md. Masudur Rahman

Reputation: 1078

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

Upvotes: 1

Brigand
Brigand

Reputation: 86230

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.

Upvotes: 4

Related Questions