Empty <Top Level></Top Level> in React tab

[carlosmmelo]

The extension was working on our app until we updated to react 0.13 version, all it shows is:

<Top Level></Top Level>

[xizhao]

For me, seems like this happens when the app renders asynchronously and the react panel doesn't update. I can fix by reloading off of the react view and switching on in console.

[carlosmmelo]

@xizhao what do you mean by "reloading off of the react view and switching on in console"

How can I possibly reload the react view?

[xizhao]

I mean reloading the page on the "elements" and switching to the "react" tab rather than loading directly with "react".

[sophiebits]

@carlosmmelo Does the extension work for you on http://facebook.github.io/react/? That's running React 0.13 right now.

@xizhao's issue is something I've also observed.

[carlosmmelo]

@spicyj yes it works on that page.

When this issue started to happen on our end is when we updated to "react": "^0.13.1" and also we added the following package: "react-router": "^0.13.2"

[bunkat]

I'm having the same problem. I'm using react-router as well and the Chrome extension only shows <TopLevel></TopLevel>. The extension works fine on the facebook react site.

[carlosmmelo]

Excellent, that would confirm that the extension is not compatible with react-router

Sent from my iPhone

On May 31, 2015, at 15:01, bill notifications@github.com wrote:

I'm having the same problem. I'm using react-router as well and the Chrome extension only shows . The extension works fine on the facebook react site.

—
Reply to this email directly or view it on GitHub.

[sophiebits]

Works fine with the react-router examples I just cloned:

Let me know how to repro and I can take a look.

[carlosmmelo]

@spicyj do you know any way we could debug this?

You were right it appears that it works on some websites with react-router, I'm out of ideas now.

[sophiebits]

Not without seeing it since I don't know what the problem is. You can go to chrome://inspect and try to use the devtools on the devtools but I don't know what the issue is here so can't give much more advice.

[jrsinclair]

I'm seeing this too. React 0.13.2. Tools appear to work fine on http://facebook.github.io/react/, but break on my site in development. Is it possible that it has trouble with asynchronous updates in general, or possibly asynchronous updates when there are multiple root nodes?

[sophiebits]

The devtools should work fine with multiple roots. facebook.com has many, for instance.

[jrsinclair]

Perhaps we should update the title of this to "React-devtools only shows single TopLevel element" since we haven't been able to narrow it down to a particular version or module?

[Enet4]

I have stumbled upon this issue before, and it turned out to be a badly configured component embedding an instance of React of its own (SO link). There may be other causes, but can it be that updating the React dependency's version number has also triggered such anomalies in projects containing faulty components?

[carlosmmelo]

@Enet4 that appears to be the issue, I'm checking with my colleagues

[crafterm]

Just adding a note to confirm @Enet4 diagnosis, I had the same problem, and traced it to react-intl including react as a dependency rather than peerDependency, with a >= version match that included a react 0.14 beta in addition the 0.13.3 version in my webpack bundle.

I've supplied a pull request to fix react-intl but unfortunately they've closed it without merging indicating that react versions are something that can be controlled at the app level (?).

Hopefully others find this info useful though as the dev tools are really useful to have working.

[bunkat]

Thank you @crafterm! Moving react to a peer dependency in react-intl fixed the issue for me and got the tools working again.

[sophiebits]

@crafterm Thanks, just commented on formatjs/formatjs#128.

[ghost]

This is happening for me too, I've verified that none of my packages are pulling in an extra copy of React, they're all using peerDependency.

[Enet4]

@lyptt Can you provide that list of dependencies and how you are building your program? Either the building process is incorrectly including multiple copies of React (even with peerDependencies), or we may just have found another cause.

[ghost]

It's a dual server/client React app using Browserify and Reactify to handle pulling everything in client-side.

For client side dependencies, I'm using browserify-middleware with express, as follows:

browserify.settings('transform', [
    reactify,
    envify(process.env)
]);
browserify.settings('mode', config.debug ? 'development' : 'production');
app.use('/js/lib.js', browserify(['lodash', 'react', 'joi', 'react-validation-mixin', 'superagent', 'events', 'cookies-js']));
app.use('/js/app.js', browserify('./browser-app.js'));

browser-app.js is my client-side bootstrapper. It's fairly simple:

var React = require("react"),
    App = React.createFactory(require("./components/app.jsx"));

if (typeof window !== 'undefined') {
    React.initializeTouchEvents(true);

    window.onload = function () {
        React.render(App(window.___APP_PROPS___), document.body, undefined);
    };
}

For server side, I'm using node-jsx to handle require with Node and JSX files, along with one centralized rendering function for each page:

var renderPage = function(req, res, initialRoute, initialRouteData, user) {
    var cookies = new Cookies(req, res, app.get('cookieSecret'));

    var initialProperties = {
        path: req.originalUrl,
        currentUser: user,
        authToken: cookies.get('auth-token'),
        initialRoute: initialRoute,
        initialRouteData: initialRouteData,
        history: true
    };

    log.debug(initialProperties);

    var element = React.createElement(require('../../components/app.jsx'), initialProperties);
    var markup = React.renderToString(element);

    res.render('index', {markup: markup, props: initialProperties});
};

Everything after that is just basic React components, that's the only special stuff I'm doing. As for a list of dependencies, here's the full list:

"dependencies": {
    "bluebird": "^2.9.30",
    "body-parser": "~1.12.4",
    "browserify-middleware": "^6.0.0",
    "cookie-parser": "~1.3.5",
    "cookies": "^0.5.0",
    "cookies-js": "^1.2.1",
    "debug": "~2.2.0",
    "envify": "^3.4.0",
    "express": "~4.12.4",
    "jade": "~1.9.2",
    "joi": "^6.5.0",
    "lodash": "^3.9.3",
    "morgan": "^1.6.0",
    "node-jsx": "^0.13.3",
    "node-sass-middleware": "^0.9.0",
    "react": "^0.13.3",
    "react-async": "^2.1.0",
    "react-router-component": "^0.25.4",
    "react-validation-mixin": "^4.1.0",
    "reactify": "^1.1.1",
    "serve-favicon": "~2.2.1",
    "superagent": "^1.2.0",
    "winston": "^1.0.0"
  }

Note that only the dependencies listed in the bundled /js/lib.js are actually sent to the client. I do get a warning about unrelated nodes, but this is because I'm rendering to body - I don't want React generating all my <script> tags as this is handled by my Jade templates. This doesn't seem to cause any issues in a similar project though.

[Enet4]

react-validation-mixin has React 0.12 as a devDependency, so it's most likely making a second instance. Care to double-check what is being bundled in your project?

[ghost]

I can't see any other versions of React in node_modules, nor in react-validation-mixin's own node_modules.

I do see two entries for React, one is React itself, and another is react/lib, however under react/lib there's only three files listed - ReactPropTransferer.js, cloneWithProps.js, and joinClasses.js, which are probably required directly from another library.

My full file list is as follows:

js/
    node_modules/
        React/
        bluebird/js/browser/
        browserify-middleware/node_modules/browserify/
        cookies-js/dist/
        joi/
        lodash/
        react/lib/
        react-async/lib/
        react-router-component/
        superagent/

Are there any telltale signs I should be looking for to see if another version of React is being bundled? I should also point out that I removed react-validation-mixin completely as I noticed the same thing too, however this did not fix the issue, which means that it most likely isn't pulling in another copy of React.

[Enet4]

Well, running browserify with --list should show all files resolved for bundling. The only alternative I can quickly think of is to traverse the resulting bundle in search for multiple React core modules.

[ghost]

Yup, that helped! One of the components I've got required react with a capital R, which for some reason browserify resolved as a completely different module. I'll go log an issue there - thanks!

[jrsinclair]

@lyptt and @Enet4 Thanks heaps for that. Went through and found components requiring React with a captital R as well. Removed them and react tools work again. 👍

[jrsinclair]

Is it worth documenting this as a known issue somewhere?

[ghost]

I think so, according to browserify it's intended behavior that the same module is loaded twice if different casings are used: node-browserify - #1063.

Either there should be a disclaimer about this, or it should be an error throw if we really shouldn't be loading React twice.

[adamrneary]

We have a similar situation that arose when we extracted a simple component to be used in two apps. We are compiling the library using webpack, setting React as a peer dependency, listing all other dependencies as devDependencies.

We have listed react as an external in the webpack config, an excerpt of which is here:

  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    publicPath: '/',
    sourcePrefix: '\t',
    pathinfo: DEBUG,
    crossOriginLoading: 'anonymous',
    library: 'Signaling',
    libraryTarget: 'umd'
  },
  externals: [
    {
      'react': {
        root: 'React',
        commonjs2: 'react',
        commonjs: 'react',
        amd: 'react'
      }
    }
  ],

In our parent app, just importing this lib (even without using it) causes this issue.

To make sure there was nothing tricky in what we were doing with the lib, I simplified the lib component to this:

import React from 'react';

export default React.createClass({
  render() {
    return (
      <div className='testComponent'>
        Test component
      </div>
    );
  }
});

When I inspect the devtools inspector I get this in localStorage under the key DEVTOOLS_INJECTED_SCRIPT:

function(){ console.error("{"message":"Could not establish connection. Receiving end does not exist."}"); }

We are using other third party React components (e.g. react-bootstrap), but with those we are not having this problem. Any ideas?

[jaredly]

The way that I've dealt with this is using webpack's alias functionality, with an abs path to react.

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

This way it uses just one react even in other modules.

[jaredly]

Have we decided that the real issue here is having multiple versions of react loaded?
And is this still a problem with the newly released beta version?

[adamrneary]

Speaking only to my specific case, the alias trick didn't end up working, unfortunately. We ended up bringing the component back into the parent repo to dodge the issue outright. (I realize that isn't helpful. Hopefully if anyone else is seeing this, we can try again!)

[ghost]

My case of including React multiple times seems to be a common cause for the problem, but I'm not sure if this is the only cause

[fgeorgsson]

The alias fix by @jaredly for webpack worked for the project I'm on that also had the empty TopLevel problem. Some dependencies had require('React') with capital R. We are also using react-intl which has it's problem too noted in this thread. Works now!

[sophiebits]

@PCguru Are these open-source deps? Everyone should be doing require('react').

[gaearon]

Closing as outdated.
If this still repro’s please let us know how.