使用某些 React-Bootstrap 组件导致不变违规

Question

我刚刚升级到 React Bootstrap v. 0.27.1、React v. 0.14.0 和 React Router v. 1.0.0-rc3，现在我得到了 Invariant当我使用某些 React Bootstrap 组件时违规。

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).

具体来说，我在使用 <Input> 和 <Nav> 组件时看到了这一点。所以我得到以下行为。

// 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>

如您所见，将 <Nav> 切换为其常规 Bootstrap 标记可解决此问题。当我添加一个 <Input> 组件时也是如此。可能还有其他组件会导致故障，但我只将范围缩小到这两个。

无论如何，我无法弄清楚为什么这些组件会发生这种情况而不是其他组件，我们将不胜感激。

Answer 1

我打开了 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 我的构建过程。由于我使用 Gulp，我的 gulpfile 最终包括以下两个任务。请注意，browserify-resolutions 是使用 .plugin(resolutions, 'react') 行调用的。

// 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'));
});

Answer 2

感谢张贴胡安。我确实尝试了 browserify-resolutions 但它完全拒绝删除包中 React 的两个副本。最后，我通过删除整个 node_modules 文件夹并重新安装完整的 npm 解决了这个问题。

这具有移除 React-dom 下包含的 React 0.14.0 依赖项的效果（这导致了构建时的重复）。我想知道这是否可能是最新的 NPM 使用扁平化文件夹结构导致的，该结构会自动在层次结构中删除重复数据。

之后我就没有问题了，根本不需要使用 browserify-resolutions。

Answer 3

如果您出于任何原因来到这里寻找解决方案，但没有任何效果。如果您还使用 create-react-app，那么我建议您检查 index.html 文件中是否有多个 "built" 包，这些包正在加载多个 react 或任何导致 Invariant Violation 错误。希望对大家有帮助。

使用某些 React-Bootstrap 组件导致不变违规

Using Certain React-Bootstrap Components Causes Invariant Violation

reactjs

react-router

react-bootstrap