Unable to include 3-d party component in React

Question

I'm trying to include 3-d party component as follows:

app.js

/** @jsx React.DOM */

var React = require('react'),
    ReactDOM = require('react-dom');
    Isvg = require('react-inlinesvg');

ReactDOM.render(
    <Isvg src="images/mobile.svg" />,
    document.getElementById('mobile')
);

package.json:

...
"browser": {
      "react": "./node_modules/react/dist/react.js",
      "react-dom": "./node_modules/react-dom/dist/react-dom.js",
      "react-inlinesvg": "./bower_components/react-inlinesvg/standalone/react-inlinesvg.js",
      "react-lazyload": "./node_modules/react-lazy-load/dist/LazyLoad.js"
  },
  "browserify": {
    "transform": [
        ["reactify", {"es6": true}]
    ]
  }

and finally gulp task configuration:

var gulp = require('gulp'),
    config = require('../config')(),
    utils = require('../utils'),
    plugins = require('gulp-load-plugins')({lazy: true}),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    reactify = require('reactify'),
    watchify = require('watchify');

gulp.task('make-js', function() {
    var options = {
        debug: true,
        entries: config.js,
        transform: [reactify],
        cache: {}, packageCache: {}, fullPaths: true
    },
    bundler = watchify(browserify(options));
    bundler.on('update', rebundle);

    function rebundle() {
        utils.log('start bundling...');

        bundler
            .bundle()
            .on('error', utils.handleErrors)
            .pipe(source('bundle.js'))
            .pipe(gulp.dest(config.tmp));

        utils.log('finished bundling...');
    }

    return rebundle();
});

This creates bundle.js file without any problems however the 3-d party inlinesvg component does not work and produces the following error in the browser javascript console:

Uncaught TypeError: Cannot read property 'PropTypes' of undefined

The error is caused by the following code in react-inlinesvg.js

Line 566
PropTypes = React.PropTypes;

I'm pretty sure I've missed something important in the browserify configuration but cannot figure out what I did wrong exactly.

Thanks for your help.

Answer 1

It seems to be an issue with that 3-d party component. I'm newbie in react so in order to exclude my configuration errors I used 100% working boilerplate. But the issue remained. The investigation revealed the module itself does not import React in a proper way. My original question could be actually split into 2 questions (how to include that module and how to load SVG files inline so let me answer the second part of my question). I did not find any working modules which could load svg without any 3-d party modules like jquery or creating my own bicycle. I came up with the well-known SVGInjector javascript module. It is a vanilla js module but has the necessary browserify support. I wrapped it into react component without problems. Here is the code:

class svg extends React.Component {
    componentDidMount(){
        return SVGInjector([ReactDOM.findDOMNode(this)]);
    }

    constructor(props) {
        super(props);
    }

    render() {
        return React.DOM.img({
              className: this.props.className,
              'data-src': this.props.path,
              'data-fallback': this.props.fallbackPath});
    }
}