Inferno: Using Fragment prevents React Dev Tools from working

[joseprio]

Issue Template

Observed Behaviour

The Root node isn't showing in React Dev Tools when a Fragment is used; instead, an error appear in the console and it permanently shows "Waiting for roots to load..."

Expected Current Behaviour

The Root node should appear.

This is the code the reproduces this problem from a basic create-inferno-app:

import { version, Component, Fragment } from 'inferno';
import Logo from './logo';
import './App.css';

function FragmentTest() {
  return (
    <Fragment>
      Test
    </Fragment>
  );
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <FragmentTest/>
      </div>
    );
  }
}

export default App;

The error in the console:

backend.js:1 Uncaught TypeError: Invalid value used as weak map key

Oddly, the error in our app seems to be related to the use of fragments, but is quite different:

backend.js:1 Uncaught Invariant Violation: The React Devtools cannot render an object as a child. (found: object with keys {childFlags, children, className, dom, flags, key, props, ref, type}). If you meant to render a collection of children, use an array instead.

Inferno Metadata

Inferno 7.1.13

[anpos231]

I can confirm I am having this error too.

[Havunen]

I think this bug should be fixed in next release.

[Havunen]

@joseprio Would you like to fix this bug or shall I do it?

[askuzminov]

We can add in createReactDOMComponent
if (vNode.type === VNodeFlags.Fragment) {
vNode.type = 'Fragment';
}
and VNodeFlags.Fragment in updateReactComponent.

But react-devtools has a new version that is no longer compatible with inferno-devtools.
https://reactjs.org/blog/2019/08/15/new-react-devtools.html

[Havunen]

It takes a lot time to maintain the compatibility with React dev tools. I think it would be better to just implement inferno-dev-tools and remove all hacks.

[joseprio]

Maybe the hacks needed to support React dev tools could be present only in the dev version of Inferno? About the react-devtools becoming incompatible, people can still compile the extension with backwards compatibility or just use an old version.

[askuzminov]

I agree with @Havunen. Own dev tool will be easier to support, will be fully compatible without hacks and it will be possible not to depend on the development of react.