question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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: https://github.com/alexplumb/material-ui/commit/40c82b80bcec82307691c936554925a09c37c6c2

  • 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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
alexplumbcommented, Oct 26, 2018

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.

0reactions
zsalzbankcommented, Oct 26, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[ButtonBase] Regression in 3.1.2 causes error "Cannot read ...
[ButtonBase] Regression in 3.1.2 causes error "Cannot read property ... TypeError: Cannot read property 'focusVisible' of null
Read more >
reactjs - Radio, Cannot read property 'focusVisible' of null
I get this warning in console when I run the sample within my setup: Warning: `WithStyles(ButtonBase)` uses `getDerivedStateFromProps` but its ...
Read more >
material-ui/core/CHANGELOG.md - UNPKG
The Tabs `fullWidth` and `scrollable` properties can't be used at the same time. The API change prevents any awkward usage. 22.
Read more >
CHANGELOG.md - TINMAN
We are making a quick release to fix an important TypeScript regression. ... Tabs `fullWidth` and `scrollable` properties can't be used at the...
Read more >
front-end/node_modules/@material-ui/styles/CHANGELOG.md
[ButtonBase] Fix ripple size when clientX or clientY is 0 (#20654) @jin60641 ... [Tooltip] Fix flip invalid CSS property error (#20745) @j-mendez ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found