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
Related
I am learning ReactJS. But now I got a problem. I used this code
import { AiOutlineShoppingCart } from "react-icons/ai"
But it is showing this error:
Module not found: Can't resolve 'react-icons/ai'
I am using sanity to build an eCommerce website cms. I tried to install react-icons with this code
yarn add react-icons
and I have checked the packages .jeson file and react-icons are present in dependencies. Can anyone please tell me how can I solve this problem?
Some extra info:
I have also use react-icons instead of react-icons/ai but same error
I have used npm install to install react-icons. Nothing helps
Firstly, you should be aware that not all icons are available. I sometime try to import some icons and I get error.
Secondly, make sure you copy the code from the website to make sure you didnot misspell the name
Futhermore, you can delete your node_module and remove react-icons from package.json file, then do yarn add react-icons and do yarn to install all your packages again
Lastly, you're to import from the library that owns the icon, i.e. if you're importing from AiFillAudio, you're to import it from react-icons/ai. eg.
import { AiFillAudio } from react-icons/ai.
I hope this help you out.
try reinstalling with npm install react-icons --save command
I figured it out. My react-icons are installed in sanity the folder. So when I was importing AiOutlineShoppingCart from react-icons, my program was looking for react-icons inside node_module of my main file. But it is stored node_module of sanity. So I have to declare the whole path.
Working code is
import { AiOutlineShoppingCart } from "../sanity/node_modules/react-icons/ai"
Here, "sanity" means sanity folder name.
Thanks, everyone for helping me.
This sometimes occurs when you install dependencies in the wrong directory.
let's say you run npm i package-x outside your project directory
I'm using bootstrap for a react project along with Yarn as package manager.
I stripped down the bootstrap package to only keep the modal component (and thus avoid unnecessary weight).
The issue is that whenever I'm adding a package in my project, it seems like the bootstrap package is rebuilt, adding back all the components I initially removed.
Is there a way to prevent the bootstrap package from rebuilding when even i'm doing a yarn install or a yarn add ?
Thanks for your help.
In the docs you can find info about how to import individual components:
You should import individual components like: react-bootstrap/Button
rather than the entire library. Doing so pulls in only the specific
components that you use, which can significantly reduce the amount of
code you end up sending to the client.
// Import single component
import Button from 'react-bootstrap/Button';
// or less ideally (imports the entire library)
import { Button } from 'react-bootstrap';
Other way would be forking the project to your personal repository and creating a version for your specific needs. But later would be harder to upgrade.
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.
Trying to create a panel plugin with react in Grafana.
As shown in their demos, added the workshop-panel created by them and added it my set up.
When running it, getting the error:
Failed to import plugin module TypeError: a.ReactPanelPlugin is not a constructor
I got the same error. This it is probably due to grafana latest not yet fully supporting the react plugins.
What I did to solve it:
Use yarn link as described here: https://www.npmjs.com/package/#grafana/ui:
"For development purposes we suggest using yarn link that will create symlink to #grafana/ui lib. To do so navigate to packages/grafana-ui
and run yarn link. Then, navigate to your project and run yarn link
#grafana/ui to use the linked version of the lib. To unlink follow the
same procedure, but use yarn unlink instead."
Then in the react panels module.tsx change export const reactPanel = new PanelPlugin(MyPanel); to export const plugin = new PanelPlugin(MyPanel);
It worked for me :-)
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';