Multiple Copies of react installed

[nitish24p]

I am using a few react components made by various libraries like material ui and i get this message

Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

on doing npm ls react i can see only one version of react installed. I am using gulp and browserify for my build process. Any idea how i can solve this?

[tutts]

I've found this is common when modules have React as a dependency rather than a peerDependency in the npm package. If you're using webpack, I've got around this by creating an alias, perhaps you can do something similar in Gulp.

  resolve: {
    alias: { 'react': path.resolve(__dirname, 'node_modules', 'react') }
  }

[nitish24p]

Awesome that helped.. Just sharing some ref for others
https://www.npmjs.com/package/gulp-resolve-dependencies

Thanks.

[gaearon]

Also please file issues in such libraries and gently ask them to use peerDependencies for react instead 😉 .

[nitish24p]

For those who do not want to install any other packages for resolving. Configure a require key in the browserify object and that will take care of the error

browserify({
        entries: path,
        require: ['react', 'react-dom'] // <- this bit here
    })
    .on("error", function(err) {
      this.emit('end');
    })
    .transform("babelify", {presets: ["es2015", "react"]})
    .bundle()
    .pipe(source(fileName))
    .pipe(buffer())
    .pipe(gulpif(params.env === 'prod', uglify()))
    .pipe(gulp.dest('./web/build/js'));