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

Question

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

Facing this issue , how to fix ?

corresponding versions

"@material-ui/core": "^4.8.3",
"@material-ui/lab": "^4.0.0-alpha.44",

Link for the component which i am using

Answer 1

You’re using the latest version of the lab, but an older version of core. Switch to 4.9.4 for core and it should be fine.

Answer 2

missing some path

Your import statement should be

import useControlled from '@material-ui/core/utils/useControlled'

There is no index file in utils.

Answer 3

Changing the the version of the packages didn't work for me. The issue was with the refrencing path in the import statement.

replace

import Autocomplete from "@material-ui/lab";

with

import Autocomplete from "@material-ui/lab/Autocomplete";