[inferno-devtools] waiting for root to load ... (message)

[kurdin]

[email protected]
[email protected]
[email protected]

App Code:

var createClass = require('inferno-create-class');
var Inferno = require('inferno');
require('inferno-devtools');

var App = createClass({
    
    displayName: 'App',

    componentWillMount() {
      console.log('hello this');
    },

    render: function({ size }) {
      return (
      	<div> Hello World </div>
      );
    }
});
 
Inferno.render(<App />, document.getElementById('app'));

Observed Behaviour
in chrome dev tools, React tab message is:

Expected Current Behaviour
React Dev Tools should display inferno component / components tree.

Inferno Metadata

macOS
Chrome

[longlho]

tks for reporting @kurdin we're looking into it :)

[kurdin]

@longlho I moved from static html file that https://github.com/infernojs/create-inferno-app generates to express server with webpack-dev-server and now same code works with React chrome extension.

[Havunen]

Inferno devTools 1.20 needs Inferno 1.20, not sure If matters in this case

[kurdin]

@Havunen I think you right. I tried again, used create-inferno-app test then npm run eject and npm i inferno-devtools now [email protected] and [email protected] and React Dev Tools works as expected.

For anyone having this problem, make sure your inferno-devtools and inferno versions match.

[flieks]

i still have this issue and have both same versions 1.1.2
used the create-inferno-app but didn't want to eject. I did update the scripts but they updated to 1.2 , not updating devtools. So was forced to eject. Now it works. Thanks to kurdin for the tip.

[jrop]

This issue should be re-opened: I am getting this issue on [email protected] and [email protected] (macOS, Google Chrome/Firefox)

[jrop]

More information:

This works (devtools load):

import 'inferno-devtools'
import Inferno from 'inferno'

function MyComponent() {
	return <div>This is MyComponent</div>
}

Inferno.render(<MyComponent />, document.getElementById('app'))

But with this code devtools do not load:

import 'inferno-devtools'
import Inferno from 'inferno'

Inferno.render(<div>Hello inferno!</div>, document.getElementById('app'))

This is tolerable, but I found this behavior unexpected.

[cstoobes]

I also cannot get devtools to work. I've installed matching versions of inferno, inferno-component and inferno-devtools (all 1.2.2) on Windows with Node 4.7.3.

I've tried both code examples above and just get the "Waiting for roots to load..." error. It appears this bug should be reopened.

[Havunen]

@cstoobes Can you please give code snippet to reproduce the issue and I will have a look and reopen.

[cstoobes]

I literally commented out all of my javascript and pasted in Jrop's code examples above, and it still didn't work. So I'm guessing it must be a configuration issue. I'm on Windows with the latest version of Chrome and React Dev Tools. This is my package.json:

  "dependencies": {
    "babel-plugin-inferno": "^1.9.0",
    "babel-preset-es2015": "^6.22.0",
    "babelify": "^7.3.0",
    "browserify": "^13.0.1",
    "del": "^2.2.1",
    "envify": "^4.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0"
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^1.11.1"
    "gulp-util": "^3.0.7",
    "inferno": "^1.2.2",
    "inferno-component": "^1.2.2",
    "inferno-devtools": "^1.2.2",
    "jquery": "^3.1.0",
    "uglifyify": "^3.0.2",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.9.0"
  },
  "engines": {
    "node": ">=4.7.3"
  }

And the gulp watch task:

  gulp.task("watchify", function() {
    var w = watchify(browserify("Website/public/EP/src/js/application.js", { debug: true }));
    
    w.transform("babelify", {presets: ["es2015"], plugins: ["inferno"]});
    w.transform("envify", {NODE_ENV: "development"});
    
    function bundle() {
      return w.bundle()
        .on("error", gutil.log.bind(gutil, 'Browserify Error'))
        .pipe(source("application.js"))
        .pipe(gulp.dest("Website/public/EP/javascripts"))
    }
    
    w.on("update", bundle);
    w.on("log", gutil.log.bind(gutil, "[browserify]"));
    
    return bundle();
  });

[cstoobes]

@Havunen, were you able to recreate this? What can I do to keep this moving?

[Havunen]

@cstoobes are you using inferno-compat also Make sure you import devTools before any components. Also Make sure you dont have functional component as Application root.

[cstoobes]

No, I'm not using inferno-compat.
I'm requiring inferno-devtools only for non-production mode and have placed this above components:

if (process.env.NODE_ENV !== 'production') {
  require('inferno-devtools');
}

My inferno application root extends inferno-component.

[Havunen]

@cstoobes does it work if you change it to top level import? (just to test)

[cstoobes]

No, I feel like I've tried every variation possible.

[Havunen]

Are you using SSR? Can you put same repo up somewhere to reproduce this?

[cstoobes]

No SSR. My inferno app is part of a much larger website, so I can't really share it. I've tried to eliminate outside conflicts by commented out all javascript except the bare essentials to render the inferno app.

[cstoobes]

Using the same configuration I noted previously and only this code in the JS:

import Inferno from 'inferno';
import Component from 'inferno-component';

if (process.env.NODE_ENV !== 'production') {
  require('inferno-devtools');
}


class ProductListing extends Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div className="grid-wrapper">
        test
      </div>
    );
  }
}

Inferno.render(<ProductListing />, document.getElementById('js-product-listing'));

I still only get "Waiting for roots to load..." error in the React Dev Tools.

[Havunen]

Copy pasted your code into basic inferno-create-app and its working...

[Havunen]

Are you using React-dev-tools 2.0.12? Chrome 56.0.2924.87?

[cstoobes]

Ok, makes me think it's a config issue. Yes, I am using those versions.

[joshburgess]

Just to add to this, I have been unable to get the Inferno devtools working with the special createRenderer function in Inferno (the function meant to be used in combination with a scan() from RxJs, Most, etc.... meant for a reactive programming setup... an alternative to manually mounting a static component to a node with render).

Also, why do we have to use inferno-component? I'm pretty sure React itself doesn't require the use of a stateful component for its devtools to connect.... Is this even true for Inferno? have seen it repeated a few times now...

[Havunen]

We need to wrap our stateless component inside class to make it compatible with React Dev tools, I know there is Bug that If you render root before devTools was initialized and that root was stateless component then there is currently no way to "boot up" the tools and it gets stuck on loading state.

[cstoobes]

I upgraded to version 1.4.0 of inferno, inferno-component and inferno-devtools, and I no longer get the loading error! Devtools appears to work as expected.

[Havunen]

Can somebody create simple repository to reproduce this issue

[aseem2625]

Seems like pretty tight coupling for inferno-devtools and inferno(not sure about inferno-routes). Even 3+ versions for each didn't work unless updated to exact same versions.

My Current working versions:

    "inferno": "^3.1.0",
    "inferno-router": "^3.1.0",
    "inferno-devtools": "^3.1.0",

Earlier had 3.0.3 for inferno and router but it didn't work with 3.1.0 of devtools. So, I had to update to match versions(all latest)

[loriensleafs]

The inferno devtools don't work in Chrome Canary for me, but they do work in Version 58.0.3029.110 (64-bit).

[Havunen]

This is now fixed in dev and will be available in next release