Material UI Input Autocomplete not working in React.js

Question

When I try to import Autocomplete exactly from the documentation: https://material-ui.com/components/autocomplete/ i get the following error message:

Failed to compile.

./node_modules/@material-ui/lab/esm/useAutocomplete/useAutocomplete.js
Attempted import error: 'unstable_useId' is not exported from '@material-ui/core/utils' (imported as 'useId').

react code:

/* eslint-disable no-use-before-define */
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

export const MyTeamShiftPlanInput = () => {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008 },
  { title: '12 Angry Men', year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: 'Pulp Fiction', year: 1994 },
  { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
  { title: 'The Good, the Bad and the Ugly', year: 1966 },
  { title: 'Fight Club', year: 1999 }
];

current versions of MUI:

    "@material-ui/core": "^4.9.10",
    "@material-ui/lab": "^4.0.0-alpha.49",
    "@material-ui/pickers": "^3.2.10",

I suggest you delete node_modules folder and install everything from beginning. Everything seems to be ok with your code. — Lazar Nikolic
– Lazar Nikolic, Commented Apr 14, 2020 at 12:47
This seems to be 'wrong peer dependency' issue with latest MUI version as per their github discussions forum. Try using 4.8 instead. — wr93_
– wr93_, Commented Apr 14, 2020 at 12:55
thanks, @LazarNikolic. This worked perfectly! I feel kinda stupid now for wasting 1.5 hours on troubleshooting this. — Etika49
– Etika49, Commented Apr 14, 2020 at 12:57
@WageeshaR i also read that but after reinstalling everything works great. — Etika49
– Etika49, Commented Apr 14, 2020 at 12:58

Dhika Putra Ardana · Accepted Answer · 2020-04-18 13:54:22Z

2

Its kind of bug on current tags so far, you could try to change your @material-ui/lab module's version

From:

"@material-ui/lab": "^4.0.0-alpha.49"

To:

"@material-ui/lab": "4.0.0-alpha.46"

answered Apr 18, 2020 at 13:54

Dhika Putra Ardana

212 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yoges nsamy Over a year ago

Thank you, it solved my issue. To others encountering the same issue, take note that there's no caret (^) character in front of "4.0.0-alpha.46"

yoges nsamy · Accepted Answer · 2020-11-03 08:08:12Z

0

This is in addition to @Dhika's answer above.

His solution didn't work the first time I tried because I failed to notice there is no caret symbol in front of the version '"4.0.0-alpha.46"'.

To fix the issue

run rm -rf node_modules/ to remove the node_modules folder
open package.json and look for "@material-ui/lab": "^4.0.0-alpha.XX"
modify the current version to "@material-ui/lab": "4.0.0-alpha.46"
run npm install
run npm start

answered Nov 3, 2020 at 8:08

yoges nsamy

1,4552 gold badges20 silver badges34 bronze badges

Collectives™ on Stack Overflow

Material UI Input Autocomplete not working in React.js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related