Ok my issue is when I use React and Material UI I get the error posted in the picture.
My code is as follows:
import React from "react";
import MenuIcon from "#material-ui/icons/Menu";
function Header() {
return (
<div className="header">
<h1>I am a header the beginnings of a website</h1>
<MenuIcon ></MenuIcon>
</div>
);
}
export default Header;
I have followed the error to the location and it is:
export { default } from './SvgIcon';
I have went through the complete setup again to see if I missed anything. However everything is just up to date. When I remove the import MenuIcon from "#material-ui/icons/Menu"; and remove the MenuIcon> from the Header my site shows.
I am lost on this issue. I have tried locating what it means by not found in react. I have been using npm to install everything.
I have installed every npm install on the https://mui.com/material-ui/getting-started/installation/ website and I am at a loss.
What am I missing?
Update
Ok after starting a new React and JS I still get the same error. I can add anything to the website I am building as anything except Material UI.. I am beginning to wander if Material UI is the problem and not what I am doing.
I can add icons with other routes. However Material UI and following the documentation and their samples still don't show the icons. It just makes the entire website blank.
When I remove all references to Material UI the website shows again. So I am wondering if anyone else has ran into this. I am using all update methods with Visual Code, Node.js and everything used in the website is up to date.
So I am wondering if it's a compatibility issue?
Did you install the icons? https://mui.com/material-ui/icons/
npm install #mui/icons-material
The code looks right.
Are you sure, that you installed the mui libary in the right folder?
The src, public and node_modules folder should be all in the same directory.
Maybe delete the node_modules folder, package.json, package-lock.json and install the dependencies again.
I think a better alternative to the MUI Icons is Iconify. You should definitly check it out.
https://iconify.design/
You can easily import icons with somethink like:
<Iconify icon='eva:heart'/>
Ok so after further analysis I have found the issue. When I was installing the npx install method Somehow it was misconfigured. When I CD into the file name it was not going to root project.
After I made sure i was in the root project and I installed the npm again everything is working fine.
Solution:
cd file-name
then you do all the installation. For some reason when I was installing the libraries it was installing outside of cd file-name
issue-screen-shot
I'm getting this issue it's quite troublesome can anyone please help me out reagarding this issue...
I'm getting this issue when trying to build my react project.
build script screen-shot
node-sass already addedd
To get MDC React Components to work with create-react-app you need to set a SASS_PATH environment variable that points to your node_modules directory. To quickly do this on OS X or Linux enter the following in your command line:
export SASS_PATH=./node_modules
If you're on Windows use the following:
SET SASS_PATH=.\node_modules
Rename your src/App.css file to src/App.scss.
You will also need to install node-sass:
npm install node-sass
I am looking to start a new react project and I was hopeful about using bootstrap-material-design but I'm not sure how to setup the project to overwrite the theme. The documentation talks about adding custom sass but I am not familiar with sass. I was hoping someone knew what step you need to get this working. I've created a fresh react app with npx create-react-app and installed the package with npm via npm install bootstrap-material-design#4.1.1. I've also added a scss folder at the root level of the project with a custom.scss file in that folder. currently the only code added to that file is an import of their sass files with #import "node_modules/bootstrap/scss/bootstrap"; but nothing seems to happen when I add a material design component such as a Navbar. I also import the custom.scss file in the index.js file with import './scss/custom.scss'; but I am still getting the following error: File to import not found or unreadable: ../../node_modules/bootstrap/scss/bootstrap.
I guess my question is has anyone successfully used this package in a react project by using npm to install rather than using the cdn and if so can they tell me the steps require to get this up and running so I can re-theme bootstrap-material-design with my own branding.
Thanks!
Install required package
npm install bootstrap-material-design node-sass
Add SASS path
open .env, add following magic
SASS_PATH=node_modules:src or SASS_PATH=./node_modules;./src for windows
Rename App.css to App.scss
Open App.scss
Add following code: #import 'bootstrap-material-design/scss/bootstrap-material-design.scss';
So far work for me.
I decided to try http://www.material-ui.com/ with darkBaseTheme.
But when I installed package via
npm i --save material-ui
I got the package without styles/baseTheme folder. That's why I can't import this theme with code from an example:
...
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
...
Can someone please tell me what did I do wrong? I'm a little bit stuck here
Looks like in the latest v1-beta baseThemes not included at all.
Here is the repository with the last commit at that moment
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';