Using Certain React-Bootstrap Components Causes Invariant Violation

Question

I just upgraded to React Bootstrap v. 0.27.1, React v. 0.14.0 and React Router v. 1.0.0-rc3 and now I'm getting an Invariant Violation when I use certain React Bootstrap components.

Uncaught Error: 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).

Specifically I see this when I use the <Input> and <Nav> components. So I get the following behaviour.

// Does NOT work.
// --------------
<Navbar>
    <Nav bsStyle="pills" activeKey={1}>
        <NavItem eventKey={1} href="/">Home</NavItem>
    </Nav>
</Navbar>

// Works
// -----
<Navbar>
    <ul className="nav nav-pills">
        <NavItem eventKey={1} href="/">Home</NavItem>
    </ul>
</Navbar>

As you can see, switching <Nav> to its regular Bootstrap markup fixes the issue. Same when I add an <Input> component. There might be other components that cause things to break, but I have only narrowed it down to these two.

In any case, I cannot figure out why this happens with these components and not with others and any help would be appreciated.

Answer 1

I opened this issue in the react-bootstrap repo and someone pointed out that this is not React Bootstrap specific, but that it was caused because two copies of React were being loaded. It seems that Browserify was causing this as I was able to resolve this by adding browserify-resolutions to my build process. Since I use Gulp, my gulpfile ended up including the two tasks below. Note that browserify-resolutions is called with the .plugin(resolutions, 'react') line.

// Compile third-party dependencies separately for faster performance.
gulp.task('browserify-vendor', function() {
    return browserify()
        .require(dependencies)
        .plugin(resolutions, 'react')
        .bundle()
        .pipe(source('vendor.bundle.js'))
        .pipe(gulpif(production, streamify(uglify({ mangle: false }))))
        .pipe(gulp.dest('public/js'));
});

// Compile only project files, excluding all third-party dependencies.
gulp.task('browserify', ['browserify-vendor'], function() {
    return browserify('src/app.js')
        .external(dependencies)
        .plugin(resolutions, 'react')
        .transform(babelify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulpif(production, streamify(uglify({ mangle: false }))))
        .pipe(gulp.dest('public/js'));
});