Material-ui: Attempted import error: 'useIsFocusVisible' is not exported from '@material-ui/core/utils'.

[elgambet]

My project was working well until today when I updated the library. The error I receive is

/node_modules/@material-ui/lab/esm/Slider/Slider.js Attempted import error: 'useIsFocusVisible' is not exported from '@material-ui/core/utils'.

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

Expected Behavior 🤔

Build should not fail

Current Behavior 😯

Build fails

Steps to Reproduce 🕹

Link: codesandbox

1. npx create-react-app my-app
2. cd my-app
3. npm install @material-ui/core @material-ui/icons @material-ui/lab
4. npm start

Context 🔦

Lift a backoffice in React

Your Environment 🌎

| Tech | Version |
|--------------|---------------------|
| Material-UI | v4.0.0 |
| React | v16.8.3 |
| Browser | Chrome or Firefox |

[elgambet]

This problem does not happen in version 4.0.0-alpha.15 working example

[TatsuyaYamamoto]

@elgambet
Hi!
I found this problem in using @material-ui/core": "4.0.0" and @material-ui/lab": "4.0.0-alpha.16". I check that @material-ui/core/util/index export useIsFocusVisible in the latest code.
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/utils/index.js

well, you can fix it by updating @material-ui/core

[oliviertassinari]

@TatsuyaYamamoto is correct (thanks). You should see a peer dependency warning in your console when installing the lab package. A working example: https://codesandbox.io/s/material-demo-hd1l0.

The lab is in an alpha state, you might see breaking changes between two updates. It's what happens between alpha.15 and alpha.16 for the Slider component. Now, it should still work in the most simple use cases without any changes required.