Module not found: Can't resolve 'material-ui/AutoComplete'

Question

I installed material-ui-search-bar and then I want to use SearchBar. But I have next problem:

./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Can't resolve 'material-ui/AutoComplete' in '...node_modules/material-ui-search-bar/lib/components/SearchBar'

How can I fix it?

Answer 1

AutoComplete is associated with Lab package of material UI. On Adding the "lab" package AutoComplete can be used. Add using yarn

yarn add @material-ui/lab

or using npm

npm install @material-ui/lab

Answer 2

I cannot upvote nor comment, so I just parrot the working solution. Thanks, @blackspacer.

This works:

npm install @material-ui/lab

One expects all Material UI elements to be present after the initial package install, but there is an exception.

https://material-ui.com/components/about-the-lab/

About the lab

This package hosts the incubator components that are not yet ready to move to the core.

Installation Install the package in your project directory with:

// with npm

npm install @material-ui/lab

// with yarn

yarn add @material-ui/lab

Answer 3

Install material-ui using this command :

npm install material-ui@latest

Answer 4

This can happen due to multiple reasons.

1) You are using the beta version of v1.0 launch of material-ui which has breaking changes. Try switching to the stable version. Or if you want to use the latest beta version, then use Refer below link: https://material-ui-next.com/demos/autocomplete/material-ui AutoComplete

2) Try importing like below:

import AutoComplete from 'material-ui/AutoComplete';

or

import { AutoComplete } from 'material-ui/AutoComplete';

Due to the port going on for @next version the modules are being reorganized and hence few components are breaking.

Answer 5

The only solution that worked is uninstall material-ui-search-bar and install using npm install material-ui-search-bar@beta

Answer 6

npm -i @material-ui/core

as more packages may be needed. For me besides lab i also needed utils. Hope this helps.

Answer 7

Use npm i @autocomplete/material-ui in your terminal.

Then run npm start, issue will be resolved.

import { Autocomplete } from '@autocomplete/material-ui';

Further more information or to try the template on another file for testing - use the below reference link. [1]:https://www.npmjs.com/package/@autocomplete/material-ui

Answer 8

yarn add material-ui-icons

Try using this in project directory

Answer 9

Install beta version npm install material-ui-search-bar@beta My issue got resolved after installing beta version.

Answer 10

This question is 4 years old so some of the answers here are no more correct. In 2022 and on v5.5, this is no more a lab component, but another reason you might be still getting this error:

export 'AutoComplete' (imported as 'AutoComplete') was not found in '@mui/material'

is if you're still using the old name. Its name has changed from "AutoComplete" to "Autocomplete", i.e., the letter c is no more capital.

So if you have something like:

import AutoComplete from @mui/material/AutoComplete

...just change it to this:

import Autocomplete from @mui/material/Autocomplete

Answer 11

This is a nice example for your problem try it.

import Tab from '@material-ui/core/Tab'

Answer 12

I guess you are not importing Autocomplete correctly .

For more information Visit here

Import like this.

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