React children errors thrown for nested components

[danielduan]

On the latest master, something is breaking the react children and how the render loops are working. This is from an old existing project that I'm trying to migrate over. It uses the info and knob addons.

Invariant Violation: Objects are not valid as a React child (found: object with keys {content}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.
    at invariant (http://localhost:9001/static/preview.bundle.js:759:15)
    at traverseAllChildrenImpl (http://localhost:9001/static/preview.bundle.js:21588:23)
    at traverseAllChildren (http://localhost:9001/static/preview.bundle.js:21616:10)
    at Object.instantiateChildren (http://localhost:9001/static/preview.bundle.js:39918:7)
    at ReactDOMComponent._reconcilerInstantiateChildren (http://localhost:9001/static/preview.bundle.js:44724:41)
    at ReactDOMComponent.mountChildren (http://localhost:9001/static/preview.bundle.js:44763:27)
    at ReactDOMComponent._createInitialChildren (http://localhost:9001/static/preview.bundle.js:41763:32)
    at ReactDOMComponent.mountComponent (http://localhost:9001/static/preview.bundle.js:41582:12)
    at Object.mountComponent (http://localhost:9001/static/preview.bundle.js:9572:35)
    at ReactCompositeComponentWrapper.performInitialMount (http://localhost:9001/static/preview.bundle.js:40414:34)

trimResultTransformer.js:21 Uncaught TypeError: Cannot read property 'emit' of null
    at trimResultTransformer.js:21

I'm rendering the components inside a wrapper component that provides a css background and environment layout.

const React = require('react');
const { PropTypes } = React;

const stylesheet = require('./ComponentWrapper.css');

const ComponentWrapper = React.createClass({
  propTypes: {
    theme: PropTypes.string
  },

  getDefaultProps() {
    return {
      theme: 'default'
    };
  },

  render() {
    return (
      <div className={ stylesheet[this.props.theme] }>
        <div className={ stylesheet.container }>
          { this.props.children }
        </div>
      </div>
    );
  }
});

module.exports = ComponentWrapper;

If I delete the line { this.props.children}, the wrapper renders fine. Is there something that's messing with how child components passed through?

[tmeasday]

Are you still seeing this? I think a bunch of users are running into it.

If you are can you post the following:

• npm version
• output of npm list

We think the issue comes about if the package has its own copy of addons.

[danielduan]

I don't see this anymore, I ended up flushing my node_modules. I think it's an issue of having the right react and react-dom versions installed since it is a peer dependency.

I wonder if changing the addon-info's react-dom dependency to a peer dependency would fix it since you could have something like [email protected] running with [email protected] causing problems.

[tmeasday]

Hmm, it's just the Cannot read property 'emit' of null which we've seen come from multiple copies of @storybook/addons.

In any case it sounds like flusing node_modules solved it, we probably can't do anything else with this bug now.