Expected a string (for built-in components) or a class/function (for composite components) but got: object

[ifeanyidavid]

I am unable to use an external module I installed and I did exactly what was instructed in the documentation. It works when i run it in codesandbox but it doesn't run in my own dev environment.

Here's my code:

import React from "react";
import { Treebeard } from "react-treebeard";
import "./custom.css";

const data = {
  name: "root",
  toggled: true,
  children: [
    {
      name: "parent",
      children: [{ name: "child1" }, { name: "child2" }]
    },
    {
      name: "loading parent",
      loading: true,
      children: []
    },
    {
      name: "parent",
      children: [
        {
          name: "nested parent",
          children: [{ name: "nested child 1" }, { name: "nested child 2" }]
        }
      ]
    }
  ]
};

export default class Dialog extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      access_token: ""
    };
  }

  componentWillMount() {
    const access_token = sessionStorage.getItem("access_token")
      ? sessionStorage.getItem("access_token")
      : "";

    this.setState({ access_token });
  }

  onToggle = (node, toggled) => {
    if (this.state.cursor) {
      this.setState({ cursor: { active: false } });
    }
    node.active = true;
    if (node.children) {
      node.toggled = toggled;
    }
    this.setState({ cursor: node });
  };

  render() {
    return <Treebeard data={data} onToggle={this.onToggle} />;
  }
}

[eulertour]

I'm running into this as well. Any assistance would be greatly appreciated.

[shilman]

Super simple repro https://github.com/shilman/cra-treebeard-error

[shilman]

I'm also able to repro this inside the repo's tests if I clear the yarn.lock file and upgrade react to 16.8.5.

The error goes away if I remove velocity-react. Therefore I believe it's an incompatibility between the latest version of React and velocity-react@1.4.1, which is the latest version as of this posting.

[shilman]

As a workaround, disable animations and the problem goes away:

<Treebeard animations={false} [...other options] />

[shilman]

Since we're no longer using treebeard in Storybook 5, I'm not going to fix this. The above workaround of turning off animations is a good start.

If anybody wants to dig in and figure out what's wrong with velocity-react, this issue contains a nice way to reproduce the problem in the repo's tests. 🙏

[eulertour]

@shilman Is there a similar tree library being used in Storybook 5? And can this project be updated with the information that it is no longer being maintained?

After all, the workaround reveals another bug, #111.