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?

Solution 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

Solution 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

Solution 3

Install material-ui using this command :

npm install material-ui@latest

Solution 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.

Solution 5

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

View more solutions

Comments

[Artem Kolodko]

Next after install, you should import it in your script. See documentation

[Marcio Klepacz]

yarn add @material-ui/icons if you are using importing import CloseIcon from '@material-ui/icons/Close';

[Dulaj Kulathunga]

could you please , give more description here to understand

[Ali Al Amine]

no need for -i. it should be npm i @material-ui/core