[ButtonBase] Regression in 3.1.2 causes error "Cannot read property 'focusVisible' of null"

[alexplumb]

For whatever reason, upgrading from 3.1.1 to 3.1.2 causes my app to stop functioning. The full error message that I'm receiving:

TypeError: Cannot read property 'focusVisible' of null
at getDerivedStateFromProps (ButtonBase.js:353)
at wi (vendor.js:55)
at Ni (vendor.js:55)
at Qi (vendor.js:55)
at Zi (vendor.js:55)
at Co (vendor.js:55)
at Lo (vendor.js:55)
at la (vendor.js:55)
at ua (vendor.js:55)
at ko (vendor.js:55)

Updating getDerivedStateFromProps like so fixes the issue: alexplumb@40c82b8

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Including Button, IconButton, or ButtonBase in my application should display the specified button.

Current Behavior

A white screen appears and the error in the title appears in the console log

Steps to Reproduce

Unable to reproduce in a code sandbox or create-react-app. Seems to only happen in my own environment.

Context

Your Environment

Tech	Version
Material-UI	3.1.2
React	16.5.2
Redux	4.0.1
Browser	Chrome 69.0.3497.81

[eps1lon]

You only changed @material-ui/core? Please post your usage of the Button component.

[alexplumb]

import { IconButton } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';

<IconButton>
    <MenuIcon />
</IconButton>

[alexplumb]

I've created a Github repo that shows my stack. The button call is being used in src/components/_ui/Nav.jsx. I haven't been able to reproduce it in this repo. I'm not sure what's going wrong with my stack, but I've been able to make it work with that simple check in ButtonBase.js that I posted in the issue description.

https://github.com/alexplumb/test-app-material-ui is the repo

[eps1lon]

Could this be facebook/react#12523? Specifically maybe some lockfile/node_modules constellation caused an older version of hoist-non-react-statics to be pulled in which can lead to prevState being null in gDSFP.

As it stands right now I will close this since it's not actionable for us in this state without a repro.

[zsalzbank]

See #13322 (comment) for what solved it for me.

[alexplumb]

I was able to resolve it by deleting my node_modules folder, package-lock.json, and re-running npm install in my project. The fix ended up being pretty simple but the bug seems to be pretty pervasive - I think it would be wise to add a check to these getDerivedStateFromProps calls anyway.

[eps1lon]

See #13322 (comment) for what solved it for me.

Isn't that what I said?

Specifically maybe some lockfile/node_modules constellation caused an older version of hoist-non-react-statics

@alexplumb
I think that's overly defensive. We can't test against every possible error caused by 3rd party libraries. I would rather throw an error there instead of warning.

[zsalzbank]

Huh - totally missed that - my bad. If I read more closely, I would have saved hours of debugging. Oh well, good experience learning react internals.