使 Browserify bundle 与 React DevTools 兼容

Question

反应 0.13.3

我开始使用 Browserify to organize my frontend React code. I'm also using the React Developer Tools Chrome 扩展进行调试。但是，我在处理一些非常简单的 React 代码时遇到了问题。

var React = require('react/addons');

//React DEV-TOOLS requires React to be on the global scope. Scope is hidden when bundling
window.React = React;

var App = React.createClass({
    render: function(){
        return (
            <div>
               <p>Hello world</p> <!-- Renders fine -->
            </div>
        )
    }
});

React.render(
    <App />,
    document.getElementById('content')
);

以下代码实际有效，"Hello world" 呈现良好。当我在控制台中启动 React 调试器时，问题就开始了。我希望它会说以下内容：

<Top Level>
    <App>...</App>
</Top Level>

但是，它只是说：

<Top Level></Top Level>

如何在没有 React devtools 识别的情况下呈现 <App>？

Answer 1

似乎已经有足够多的人偶然发现了这个问题，official guide 并没有提到这个特殊的症状。在收集到足够的证据后，最好在此处发布一个答案，即使这个 <Top Level></Top Level> 问题可能有其他原因。

如果包中有多个 React 实例，React DevTools 可能无法工作。这通常与特定组件中不正确的捆绑工具配置（browserify 或 webpack）有关。 React 组件（以及 React 支持的其他库，例如 Mixins）应该始终具有 react 作为 npm 中的 peerDependency 和 "external" 在 browserify/webpack 中。这将使模块的可分发版本不会为自身嵌入 React。此外，如果使用React插件，"react/addons"可能还需要注册为外部依赖。

在没有遵循这一点的情况下，仅包含带有 require（或 ES6 的 import）的模块将使开发工具无用。当 React 的另一个实例出现时，该实例会将自己注册为元素树的源，这就是显示空元素的原因。我已经在 react-loaders（issue #2), and it's now fixed since 1.2.3. The same might have happened to react-google-maps 根据@Carpetfizz 所说的追踪了这个错误，尽管我没有深入研究这个案例。

调试此问题的一个简单技巧是获取准系统模块 + 网页并迭代添加 require 指令，直到 React 开发工具停止工作。找到故障组件后，提出问题。

var React = require('react');
var Loader = require('react-loaders'); // testing react-loaders

var App = React.createClass({
    render: function(){
        return (
            <div>
               <p>Check the React tab!</p>
            </div>
        )
    }
});

React.render(<App />, document.getElementById('container'));

在 React packages for Meteor, where the development runtime was changed to load the main instance of React last (commit).

中执行了另一个奇特的解决方案

该主题已在问题 #90 中解除，这有助于确定更多不合规的包裹案例。

使 Browserify bundle 与 React DevTools 兼容

Making Browserify bundle play nice with ReactDevTools

javascript

reactjs

browserify