Error when clicking on the menu item on React 16

[MOZGIII]

Workaround: #1965 (comment) (#1965 (comment))

I've updated to react 16 and there's this strange error: when I click on any menu item (to open other story or group) I have blank screen (nothing at all is rendered).

I use yarn storybook to start storybook.

yarn run v1.1.0
$ start-storybook -p 9009 -s public
@storybook/react v3.2.12
=> Loading static files from: /home/mozgiii/Desktop/truvest/webapp/public .
=> Loading custom addons config.
=> Using default webpack setup based on "Create React App".
webpack built 8fda9afa05b5574a775e in 5531ms                                              
Storybook started on => http://localhost:9009/

Initially page loads on the first story. Looks ok so far, but there are some errors in the console:

Here's the log as saved by chrome: localhost-1507074821359.log

Now, when I click on any menu item something bad happends and I have blank screen.
There are new errors in the console:


Some skipped, it's only the beginning and the end...

New log: localhost-1507075072650.log

I have no idea why this is happening. I tried using react 15 again and it works there. I've also tried removing all my storeis and using only standard "welcome" with the same results - I think it means the issue is somewhere in the package.

I'm using CRA, here's some info on my setup:

• yarn.lock
• node --version: v8.6.0

Keywords:

• Uncaught TypeError: Cannot read property 'velocity1507074569941' of null
• The above error occurred in the <TransitionGroup> component:

[mthuret]

I have the same :(

What dependency do you have on your CRA app?

[MOZGIII]

Check out yarn.lock.

[marchdoe]

@MOZGIII Getting the same error after updating a project.

I believe the issue is in this dependency, will continue to debug later this evening.

react-treebeard@^2.0.3:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/react-treebeard/-/react-treebeard-2.0.3.tgz#cd644209c1be2fe2be3ae4bca8350ed6abf293d6"
  dependencies:
    babel-runtime "^6.23.0"
    deep-equal "^1.0.1"
    prop-types "^15.5.8"
    radium "^0.19.0"
    shallowequal "^0.2.2"
    velocity-react "^1.3.1"

[MOZGIII]

I saw error occuring at velocity-react package, but I'm not sure if it's the issue. Debugging this without the code knowledge is hard.

I had the exact same problem when upgrading React and Storybook. Yarn had upgraded Storybook to "^3.2.8" and not 3.2.12.
Running yarn upgrade @storybook/react@3.2.12 seems to have fixed it for me.

I still get some Yarn warning around React 15 peer dependencies, but they don't seem to cause any issues...

[MOZGIII]

Can you post your yarn.lock?

[mthuret]

a temporary workaround I found with this issue (as upgrading to 3.2.12 wasn't enough), is to use the options addon and set sidebarAnimations to false.

react-treebeard uses velocity-react for those animations and somehow it's not working anymore with React16.

[MOZGIII]

I can confirm this workaround works! Thanks @mthuret for investigating the issue and sharing the solution.

[MOZGIII]

Proper fix is still needed though.