I am trying to create a basic navigation bar with Material UI. The boilerplate template on Material-UI's doc site https://material-ui.com/components/app-bar/ is returning the following error in the browser:
"Attempted import error: '#material-ui/icons' does not contain a default export (imported as 'MenuIcon')."
I have installed #material-ui/core and #material-ui/icons using npm. See package.json:
{
"name": "profile_v4",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.11.8",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.6.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
My Navbar.js component file:
import React from 'react'
import { AppBar, Toolbar, IconButton, Typography, Button } from '#material-ui/core';
import MenuIcon from "#material-ui/icons";
const Navbar = () => {
return (
<AppBar position="static">
<Toolbar>
<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
)
}
export default Navbar;
I have looked elsewhere on SO for a solve but all answers are a variation on "You have not installed npm material-ui/icons package" so I was hoping someone could tell me what I'm missing. Thanks in advance!
The problem is with how you are importing the icon. You can fix it by either changing to a named import or provide the full path to the icon.
import MenuIcon from "#material-ui/icons/Menu";
import { Menu as MenuIcon } from "#material-ui/icons";
In v5.10.10 this component is not installed with mui
npm install #mui/icons-material
Run an install for the icons-material will bring them into your node_modules/#mui folder.
You can repeat this process for other missing components you are trying to use.
Related
I am using the latest Material-UI installation in a React-Gatsby app.
I installed a third party package for a carousel (react-material-ui-carousel).
When I use this package I see it overrides some of my material-ui styles by adding css divs that compete with my app's css divs.
the data-emotion divs are added by my app, and the data-jss style divs are added by the package react-material-ui-carousel.
Is there a way to limit the carousel styling only to the carousel component and not impact the other material-ui components on my page?
(for example the MuiButtonBase contains the MuiButtonBase-root rules that override my site's rules)
try to check your package-lock
and use 3 blocs
"node_modules/react-material-ui-carousel": {
"version": "2.3.7-mui5",
"resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.7-mui5.tgz",
"integrity": "sha512-XM6+kn6db++riBKUufl7XQI8eE/qj5XWpkDpHUWnioICCdUqx6cvWJmIqjBqcMNB4FgcgJFVmsE3iEKs/4gRIA==",
"dependencies": {
"auto-bind": "^2.1.1",
"react-swipeable": "^6.1.0"
},
"peerDependencies": {
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.0",
"#mui/material": "^5.0.0",
"#mui/styles": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
},
"react-material-ui-carousel": {
"version": "2.3.7-mui5",
"resolved": "https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.7-mui5.tgz",
"integrity": "sha512-XM6+kn6db++riBKUufl7XQI8eE/qj5XWpkDpHUWnioICCdUqx6cvWJmIqjBqcMNB4FgcgJFVmsE3iEKs/4gRIA==",
"requires": {
"auto-bind": "^2.1.1",
"react-swipeable": "^6.1.0"
}
},
"react-material-ui-carousel": "^2.3.7-mui5",
You can use StylesProvider from #material-ui/core/styles with this you can put prefix to classes names and avoid styles override
import {
MuiThemeProvider,
ThemeProvider,
StylesProvider,
createGenerateClassName,
} from '#material-ui/core/styles';
const generateClassName = createGenerateClassName({
seed: 'classes-custom-prefix',
});
export const Provider = ({ children, theme }) => {
return (
<StylesProvider generateClassName={generateClassName}>
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</MuiThemeProvider>
</StylesProvider>
);
};
I was having issues/inconsistencies with styles between production and deploy. For me, the best way to style elements and override MUI styles without "!important" is using:
import { styled } from "#mui/material/styles";
import Button from "#material-ui/core/Button";
const CustomButton = styled(Button)(({ theme }) => ({
display: "flex",
...
}));
And then instead of using
<Button ...args>label</Button>
use
<CustomButton ...args>label</CustomButton>
Currently I'm using react-markdown as my markdown component in my react project. Along with this I'm also using rehype-raw and remark-gfm. Whenever I run the project I get the following error:
The following is my package.json:
"dependencies": {
"next": "11.1.2",
"next-images": "^1.8.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-markdown": "^7.0.1",
"rehype-raw": "^6.1.0",
"remark-gfm": "^2.0.0",
},
and my component:
import ReactMarkdown from "react-markdown";
import styles from "../styles/Home.module.css";
import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
export default function Home({ posts }) {
return (
<main className={styles.main}>
{posts &&
posts.map((image) => (
<div style={{ height: "100%" }}>
<ReactMarkdown
children={image.Content}
rehypePlugins={[rehypeRaw]}
/>
</div>
))}
</main>
);
}
Error shown in logs:
I experienced similar error too, then I've found this solution:
https://github.com/vercel/next.js/issues/25454#issuecomment-903513941
ReactMarkdown is an ESM module which means it cannot be required but rather imported. If you are actually importing in your code, it can be, that the transpiler (e.g.: Babel) changes this, hence the error. So this can be a possible cause of the error.
What you can do to solve this (also described in the issue commit by others):
npm i next-transpile-modules
In next.config.js do the following:
const withTM = require('next-transpile-modules')(['react-markdown']);
module.exports = withTM({
...restOfYourConfig
})
Import ReactMarkdown like this: import ReactMarkdown from 'react-markdown/react-markdown.min';
Other sources:
https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
https://nextjs.org/docs/messages/import-esm-externals
https://www.npmjs.com/package/next-transpile-modules
I am having problem with material ui. It worked for my first two projects but suddenly now its showing this error:
Module not found: Can't resolve '#material-ui/icons/Add' in
'E:\Projects\Slack-clone\slack-clone\src'
This is one of my components:
import React from 'react';
import "./Header.css";
import { Avatar } from '#material-ui/core';
import AddIcon from '#material-ui/icons/Add';
function Header() {
return (
<div className="header">
<div className="header_left">
<Avatar className="header_avatar" alt="soham bhosale" src=""/>
<AddIcon />
</div>
and this is my package.json after installing material-ui:
{
"name": "slack-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.10",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.1"
}
Try this
npm install #material-ui/icons
And after that please check package.json you will find your package and after that you can try like this import AccessAlarmIcon from '#material-ui/icons/AccessAlarm';
I keep getting this error despite having tried to install react-bootstrap, reactstrap, adding the scripts and imports from react-bootstrap documentation.
I have tried : npm i react-bootstrap --save
And: npm install react-bootstrap bootstrap
I have created a similar project with this same component and it works perfectly fine, I don't understand why it won't work in this project.
This is the component file:
import React from 'react';
import './Header.css'
import Navbar from 'react-bootstrap/Navbar'
import {Container} from "reactstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
import { NavLink } from 'react-router-dom';
const Navigation = () =>{
return(
<div className="header">
<Navbar bg="dark" variant="dark" expand="lg">
<Container>
<Navbar.Brand href="#home"><NavLink to="/">Home</NavLink></Navbar.Brand>
<Navbar.Brand href="#about"><NavLink to="/catallaxy">Catallaxy</NavLink></Navbar.Brand>
<Navbar.Brand href="#home"><NavLink to="/events">Events</NavLink></Navbar.Brand>
<Navbar.Brand href="#about"><NavLink to="/about">About Us</NavLink></Navbar.Brand>
<Navbar.Brand href="#contact"><NavLink to="/contact">Gallery</NavLink></Navbar.Brand>
</Container>
</Navbar>
</div>
)
}
export default Navigation;
I wanted to put this as a comment, as it is a simple and quick solution, but code cannot be formatted there.
import React from 'react';
import './Header.css'
import {Container, Navbar } from "reactstrap"; //this line here is the solution.
import 'bootstrap/dist/css/bootstrap.min.css';
import { NavLink } from 'react-router-dom';
and your package.json should have reactstrap like this.
"dependencies": {
"classnames": "2.2.6",
"moment": "2.26.0",
"node-sass": "4.14.1",
"nouislider": "14.5.0",
"react": "16.13.1",
"react-bootstrap-switch": "15.5.3",
"react-datetime": "2.16.3",
"react-dom": "16.13.1",
"react-router": "5.2.0",
"react-router-dom": "5.2.0",
"react-scripts": "3.4.1",
"reactstrap": "8.4.1". <------- here
}
this is what usually works. here is a reference link of a working navbar - https://github.com/Jay-study-nildana/RandomStuffReactJSApp/blob/master/src/components/Navbars/IndexNavbar.js
react-bootstrap and reactstrap are almost same things and they provide same components.
Just use one of them and import both Navbar and Container.
import {Container, Navbar} from "react-bootstrap"
I was facing same issue
Solution:
import { Container, Navbar } from "react-bootstrap";
Note: Make sure you already installed the below package:
npm i --save react-bootstrap
Result:
npm i --save react-bootstrap
I am facing error in installing this package
Hi I am new to using material-ui. I am having issues when using material-ui-next.
I've done some research and removed the packages and reinstalled them. However, I keep getting the same error with 'withStyles'
Playing around with tables and/other components.
However I am getting this error: Module 'material-ui/styles' has no exported members 'withStyles'
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
const styles = {
root: {
flexGrow: 1,
},
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
function ButtonAppBar(props) {
const { classes } = props;
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
Title
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</div>
);
}
ButtonAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ButtonAppBar);
This is my package.json:
"dependencies": {
"axios": "^0.18.0",
"material-ui": "^1.0.0-beta.39",
"material-ui-icons": "^1.0.0-beta.36",
"material-ui-next": "^1.0.0-beta.39",
"material-ui-next-types": "^1.0.0",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-ionicons": "^2.1.6",
"react-redux": "^5.0.7",
"react-scripts": "1.1.1",
"react-tap-event-plugin": "^3.0.2",
"redux": "^3.7.2"
},
I was previoulsy using material ui original version. Not material-ui-next. As I am trying to migrate I am also receiving this error. I was hoping to see if anyone could point me in the right direction and/or let me know what I am doing wrong.
"Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports."
i was having issues but my path was wrong (using Beta.44) i just changed
import {StyleRules, withStyles, WithStyles} from 'material-ui/styles';
to
import {StyleRules, withStyles, WithStyles} from 'material-ui/styles/index';
this is a good resource
https://medium.com/#liangchun/integrating-material-ui-next-with-your-react-typescript-project-80847f7eab64
Your package.json dependencies should look like this:
"dependencies": {
"axios": "^0.18.0",
"material-ui": "^1.0.0-beta.33",
"material-ui-icons": "^1.0.0-beta.17",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-ionicons": "^2.1.6",
"react-redux": "^5.0.7",
"react-scripts": "1.1.1",
"react-tap-event-plugin": "^3.0.2",
"redux": "^3.7.2"
}
I removed the material ui packages with next in their names.