Storybook: Library upgrade of react-treebeard to 3.2.0 breaks storybook ui.

[bbellmyers]

Describe the bug
Running an upgrade on storybook upgrades react-treebeard dependency to 3.2.0, which breaks storybook/ui.

To Reproduce
Steps to reproduce the behavior:

1. delete node_modules and package-lock.json
2. Run npm install
3. run storybook
4. Storybook starts, but then immediately becomes a blank page, console shows errors with TreeBeard.

Expected behavior
Storybook should start

Screenshots
.. blank screen

Code snippets
.. not applicable

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Browser: chrome
• Framework: react
• Version: 1.0.0

Additional context
Suggest either changing package.json from "^3.1.0" to "3.1.0" to prevent auto upgrade, OR, fix codebase to work with updated react-treebeard library.

Error:

The above error occurred in the <Container> component:
    in Container (created by ContainerDecorator)
    in div (created by MenuItem)
    in MenuItem (created by ContainerDecorator)
    in ContainerDecorator (created by Context.Consumer)
    in Unknown (created by NodeHeader)
    in NodeHeader (created by TreeNode)
    in li (created by Context.Consumer)
    in Styled(li) (created by TreeNode)
    in TreeNode (created by TreeNode)
    in ul (created by Context.Consumer)
    in Styled(ul) (created by TreeNode)
    in Transition (created by VelocityTransitionGroupChild)
    in VelocityTransitionGroupChild (created by VelocityTransitionGroup)
    in div (created by TransitionGroup)
    in TransitionGroup (created by VelocityTransitionGroup)
    in VelocityTransitionGroup (created by Drawer)
    in Drawer (created by TreeNode)
    in li (created by Context.Consumer)
    in Styled(li) (created by TreeNode)
    in TreeNode (created by TreeBeard)
    in ul (created by Context.Consumer)
    in Styled(ul) (created by TreeBeard)
    in TreeBeard (created by Stories)
    in div (created by Context.Consumer)
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by Stories)
    in Stories (created by StoriesPanel)
    in div (created by Context.Consumer)
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by StoriesPanel)
    in StoriesPanel (created by Container(StoriesPanel))
    in Container(StoriesPanel) (created by storiesPanel)
    in storiesPanel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by Layout)
    in div
    in Pane
    in div
    in SplitPane (created by Layout)
    in Layout (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by ForwardRef)
    in ForwardRef (created by Layout)
    in div (created by Layout)
    in Unknown (created by Layout)
    in Layout (created by Container(Layout))
    in Container(Layout)
    in div

[shilman]

What version of Storybook?

[piperchester]

@shilman we're seeing this break on ^4.1.16.

Like @bbelmyers mentions, we solved by hoisting react-treebeard to a top level devDep, and pegging it at 3.1.0.

[shilman]

Thanks for the heads up. 🙏 I'll update 4.x this weekend!

[jantimon]

Can confirm - we had the same issue (which caused an empty storybook with that stack trace).
Using the older react-treebreard version fixed it.

Thanks a lot @piperchester and @shilman

[gilmoreorless]

For anyone using Yarn, forcing react-treebeard to install 3.1.0 via resolutions worked for me:

// package.json
{
  // <other package.json fields here>
  "resolutions": {
    "react-treebeard": "3.1.0"
  }
}

Then run yarn install to update the yarn.lock file.

[shilman]

cc @maximilianoforlenza @ndelangen

[shilman]

Released: https://github.com/storybooks/storybook/releases/tag/v4.1.18

Closing -- please LMK if there are any problems with the release!