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

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?

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

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

Install material-ui using this command :
npm install material-ui#latest

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.

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

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

npm -i #material-ui/core
as more packages may be needed. For me besides lab i also needed utils. Hope this helps.

yarn add material-ui-icons
Try using this in project directory

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

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

This is a nice example for your problem try it.
import Tab from '#material-ui/core/Tab'

I guess you are not importing Autocomplete correctly .
For more information Visit here
Import like this.
import Autocomplete from '#material-ui/lab/Autocomplete';

Related

Can't import the named export 'PublicKey' from non EcmaScript module (only default export is available)

Describe the bug
Hi, I'm trying using Metaplex to upload the assets and verify the collection, I am now moving towards "Minting Website": https://docs.metaplex.com/candy-machine-v2/mint-frontend
run rpm start inside the folder ~/metaplex/js/packages/candy-machine-ui to test the mint button, it doesn't load the localhost and it shows me the following error on the terminal:
Failed to compile.
./node_modules/#solana/buffer-layout-utils/lib/esm/web3.mjs
Can't import the named export 'PublicKey' from non EcmaScript module (only default export is available)
Anyone know how to solve this? thanks
I'm using Visual Studio on Windows, node 14.15.
Update:
It seems I'm not alone:
https://github.com/solana-labs/buffer-layout-utils/issues/6
Solved it:
How to downgrade the version of Solana to 1.9.1
For some reason yarn install wasn't doing it for me like in the docs.
I deleted node_module, package-lock.json and yarn.lock then installed with npm instead
npm install && npm start
that worked for me

How to install missing material-ui files in react

After having installed my material-ui for my react project, but when it comes to use it always bring up an error telling me that
'Module not found'
./src/Components/LatestPost.jsModule not found: Can't resolve#material-ui/lab/Skeleton' in 'C:\Users\Zinox\super-surf\src\Components'
You would have only installed #material-ui/core package which would not include the experimental features you are looking for and hence you are getting the error Module not found: Can't resolve '#material-ui/lab/Skeleton'
To use experimental features of Material UI like Skeleton, Rating, Speed Dial and so on you need to also install the Material UI Lab package,
npm install #material-ui/lab
Note that this is needed in addition to the #material-ui/core package that you installed earlier with npm install #material-ui/core
After installing the above package you could import it as,
import Skeleton from '#material-ui/lab/Skeleton';
in your React Component and use it as desired.
you should add two packages into the app first is
yAR i #material-ui/lab #material-ui/core
Stumbled upon the same issue. Skeleton doesn't seem to be contained in the latest package version (4.0.0-alpha.22) at the moment. But it is on their source folder, which is odd.
Maybe you open an issue at their GitHub.
EDIT:
I did: https://github.com/mui-org/material-ui/issues/16919
Module not found: Can't resolve '#material-ui/lab/Skeleton'
If you want to use Skeleton, Rating, Speed Dial, and so on you need to also install the Material UI Lab package.
npm install #material-ui/lab
or
yarn add #material-ui/lab
Link here.
enter link description here

react-bootstrap-table-next doesn't have type script to support import

After I installed react-bootstrap-table-next, I tried to use
"import BootstrapTable from 'react-bootstrap-table-next';" in my tsx file. As example showed in here
I got error message says "Could not find a declaration file for module 'react-bootstrap-table-next'. '../node_modules/react-bootstrap-table-next/lib/index.js' implicitly has an 'any' type."
And I run npm install #types/react-bootstrap-table-next, but couldn't find any.
Does anyone has same issue? or how did you solve the problem?
Ron
Right now it looks like there are no plans to support Typescript by the team that develop the project.
You can track the develop of the issue here on this issue and maybe you can vote up. I'm also waiting for it.
You can use this package. There is support for TypeScript now.
npm install --save #types/react-bootstrap-table-next
or
yarn add #types/react-bootstrap-table-next
try running
npm install react-bootstrap-table-next --save

Module not found: Can't resolve 'bootstrap/dist/css/bootstrap-theme.css' in 'C:\react-form-validation-demo\src'

I am newbie in react.js. I have been following instruction in how-to-do-simple-form-validation-in-reactjs and I can run http://localhost:3000/
But after adding bootstrap in index.js, I got this error
Failed to compile ./src/index.js Module not found: Can't resolve
'bootstrap/dist/css/bootstrap-theme.css' in
'C:\react-form-validation-demo\src'
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
If I remove these two lines below, it works:
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
In Bootstrap version 4, the file 'bootstrap-theme.css' has been removed, according to the issue on GitHub. See the change history for details.
If you want to continue using version 4, remove this import, else downgrade to version 3.
This error is caused by a misconfiguration, version mismatch or corrupted bootstrap install.
If you've got bootstrap and react-bootstrap installed already via some variation of:
npm install --save bootstrap#^4.0.0-alpha.6 react-bootstrap#^0.32.1
(Check if your package.json contains "bootstrap" and "react-bootstrap" if your not sure.)
Just install a different version of bootstrap and rebuild your project. That should replace or add that file (bootstrap/dist/css/bootstrap-theme.css) to that folder.
A lower version of bootstrap worked for me as recommended in my create-react-app generated README.md:
npm install --save react-bootstrap bootstrap#3
Adding Bootstrap
You don’t have to use React
Bootstrap together with React but
it is a popular library for integrating Bootstrap with React apps. If
you need it, you can integrate it with Create React App by following
these steps:
Install React Bootstrap and Bootstrap from npm. React Bootstrap does
not include Bootstrap CSS so this needs to be installed as well:
sh npm install --save react-bootstrap bootstrap#3
Alternatively you may use yarn:
sh yarn add react-bootstrap bootstrap#3
reinstall the bootstrap and don't forget to mention --save to the command to save it to the node modules this solved the problem for me.
sudo npm install bootstrap --save
Adding the solution to the cause I ran into - it was my miss, but still unclear when reading the other answers.
If react-bootstrap is installed solo like this:
npm install --save react-bootstrap
then bootstrap will be missing. Try the following to correct:
npm install --save bootstrap
The correct way to install initially is as follows:
npm install --save react-bootstrap bootstrap
Install the bootstrap using the below command.
npm install react-bootstrap bootstrap
Then include the below line in the index.js file.
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
I got the same problem and this is how I resolved the problem.
First of all delete the node_modules directory from the project and then install bootstrap with below command.
npm install
npm i bootstrap
Then, you can add the below import to the index.js
import 'bootstrap/dist/css/bootstrap.min.css';
npm install --save bootstrap#^4.0.0-alpha.6 react-bootstrap#^0.32.1
i face same problem but after installing above packages it work well,
may b you should also install same packages
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
Source: github
Remove
import 'bootstrap/dist/css/bootstrap-theme.css'
That worked for me.
I faced the same issue, but my project was not created with create-react-app, mine was using webpack.
I can answer how I resolved it for webpack, maybe you can find the changes required for create-react-app after you go through this answer.
First I installed these two modules-
style-loader
css-loader
Then I modified the webpack.config.js file and added these lines inside the module.rules array.
{
test: /\.css$/,
loader: 'style-loader'
},
{
test: /\.css$/,
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
This resolved the error in my project. You can also refer to this Github issue thread once, may be that may help you: https://github.com/facebook/create-react-app/issues/301
Check if you have bootstrap in package.json file .
If it is there remove and use the below commands to reinstall or install if it is not there.
npm install --save bootstrap
Some times is writing error
bootstrap/dist/css/bootstrap.min.css
boostrap/dist/css/bootstrap.min.css
check this tip, sometimes happend
You can also check that your package.json imported name of dependancy are not the same.
It is possible that when you installed bootstrap you were not in the directory that create-react-app created (that was the source of my problem). You can check with: npm list, which looks for locally installed packages.
Then scroll all the way to the top and see if you can find bootstrap listed there.
Stop the npm server than restart it. It'll be solved if you installed the packages perfectly.
Make sure bootstrap and react-bootstrap are installed.
npm install bootstrap react-bootstrap
I had simply reinstalled the previous Bootstrap version which I installed in my project folder and it worked.
from the "resource/js/app.js" remove require('./bootstrap')
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
You need to install both packages reactstrap and bootstrap by running these commands:
npm i reactstrap
npm i bootstrap

Jest fails with error: Cannot find module 'react/lib/ReactComponentTreeHook'

I have installed Jest v17.0.3 in my react project.
When I run jest locally it works fine, but on the build server it fails with:
Error: Cannot find module 'react/lib/ReactComponentTreeHook' from 'ReactDebugTool.js'
Both machines are running node version 6.9.1 and npm version 4.0.2.
use same version of react and react-dom. My problem fixed after using this command
npm install --save react#15.4.0 react-dom#15.4.0
this problem specially occurs on react 15.4.0 above.
Can you check which version of React you are using? Is it the same on both servers? I would try removing node_modules and reinstalling the dependencies. The reason I am suggesting this is that in React v15.4.0 you cannot import private apis and it seems that ReactDebugTools.js is trying to import from react/lib/....
From the blogpost about React v15.4.0 (Link):
However, there is a possibility that you imported private APIs from react/lib/*, or that a package you rely on might use them. We would like to remind you that this was never supported, and that your apps should not rely on internal APIs. The React internals will keep changing as we work to make React better.
Hope this helps!
In the latest versions of react we often see this error as we have loaded 2 versions of react:
To make sure you have just 1 version, run the following in your terminal:
npm ls react-dom
npm ls react
Both the react and react-dom versions need to be same.
If any one of these returns more than 1 version then that's not supported. You have to then correct it in your corresponding package.json
I had the same issue and i removed the node_modules and ran npm install and it fixed the problem.

Resources