Browserify package creation works great with ReactDevTools
Reaction 0.13.3
I started using Browserify to organize my front-end code. I am also using React Developer Tools Chrome Extension for debugging. However, I am having problems with very simple React code.
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')
);
The following code actually works and "Hello world" renders fine. The problem starts when I run the React debugger on my console. I expect it to say the following:
<Top Level>
<App>...</App>
</Top Level>
But instead, he just says:
<Top Level></Top Level>
How <App>
can Rept devtools display without detection?
source to share
It looks like people have stumbled upon this question and the official guide does not mention this particular symptom. With enough evidence in place, it is best for the answer to be posted here, even if there may be other reasons for this issue <Top Level></Top Level>
.
React DevTools may not work if multiple React instances are bundled. This is often due to misconfiguration of the bundling tool (browser or webpack) in a particular component. React components (and other libraries supported by React like Mixins) should always have react
both peerDependency
in npm and as "external" in the browser / webpack. This will prevent the distribution version of the module from introducing React for itself. In addition, if React addons are used, react / addons can also be registered as an external dependency.
In cases where this has not been done, simply including the module with require
(or ES6 import
) will render the dev tools useless. When another React instance appears, it will register itself as the source of the element tree, so an empty element is shown. I tracked this bug in react-loaders
( issue # 2 ) and now it has been fixed since 1.2.3. The same could have happened with react-google-maps
according to what @Carpetfizz said, although I didn't look deep into the matter.
One simple trick to debug this is to take a barebones module + a web page and iteratively add instructions require
until the React dev tools are running. When the faulty component is found, indicate the problem
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'));
Another peculiar solution was done in React packages for Meteor , where the development runtime was changed to load the main React last instance ( commit ).
This topic was removed in issue # 90 , which helped identify more cases of non-compliant packages.
source to share