Material-ui: Module 'material-ui' has no exported members withStyles - reactjs

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.

Related

mui cannot override size style to Rating component

I cannot override default style of MUI Rating component. No matter what it defaults to medium 24 fontSize, and does not increase it. What had I done wrong?
import { Rating } from '#mui/material';
export const Stars = () => {
return (
<>
<Rating name="size-large" defaultValue={2} size="large" />
<Rating
name="size-large"
value={4.5}
precision={0.5}
sx={{ fontSize: '48px' }}
size="large"
readOnly
/>
</>
);
};
package.json
"dependencies": {
"#emotion/react": "^11.10.6",
"#emotion/styled": "^11.10.6",
"#mui/icons-material": "^5.11.0",
"#mui/lab": "^5.0.0-alpha.115",
"#mui/material": "^5.11.9",
"#tanstack/react-query": "^4.22.0",
"axios": "^1.2.2",
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.2",
"styled-components": "^5.3.6",
"yup": "^0.32.11"
},
You're probably not calling this component and seeing some other component. Your code has the first stars with a default value of 2, but your screenshot shows the value at 440 / 550.
Or you may have an MUI Ratings style override or global stylesheet preventing the inline sx styling from taking hold.
You can right click Inspect the stars you are expecting to have a font-size: 48px then see what CSS stylesheet it's getting it's actual font-size from.
Using your code and dependencies in a simple sandbox I see the larger stars as expected.

MenuIcon not found in material-ui/icons

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.

Display marker in react-mapbox-gl with Feature and Layers

I'm using the example code that's on the "alex3165/react-mapbox-gl" GitHub repo. Not the example folder but the Getting Started example. The map shows but the marker just doesn't show. Not sure what I am dong wrong. Been cracking my head around such a basic thing but just cant solve it. I have looked at previous questions on the net around this topic but none is a solution for me. Here is my code and my dependencies. Help will be really appreciated. Thanks in advance guys.
PACKAGE JSON
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"mapbox-gl": "^1.13.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-mapbox-gl": "^5.0.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
CODE:
import React, { useState } from "react";
import "./App.css";
import ReactMapboxGl, { Layer, Feature, Marker } from "react-mapbox-gl";
const Map = ReactMapboxGl({
accessToken: "<my access token goes here>",
});
function App() {
const [Zoom, setZoom] = useState(10);
const [coordinates, setcoordinates] = useState([28.0473197, -26.2041059]);
return (
<div className="App">
<Map
center={coordinates}
zoom={[Zoom]}
// eslint-disable-next-line react/style-prop-object
style="mapbox://styles/mapbox/streets-v9"
containerStyle={{
height: "100vh",
width: "100vw",
}}
>
<Layer type="symbol" id="marker" layout={{ "icon-image": "marker-15" }}>
<Feature coordinates={[28.0473197, -26.2041059]} />
</Layer>
</Map>
</div>
);
}
export default App;

React native vector incons issue

I spend a lot of time to fix this problem, but couldn't find a solution for this. Pease
need your help on how to get icon from react vector icons. Below my code and
package.json file. I just want to add a menu icon to the nav bar... Thanks for the help
import React from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
// import {FiMenu} from 'react-icons/fi';
//import MenuIcon from '#material-ui/icons/Menu';
import Icon from 'react-native-vector-icons/';
const MenuNav = ({navigation}) => {
const showDrawer = () => {
navigation.openDrawer();
};
return (
<View style={styles.menucontainer}>
<TouchableOpacity style={styles.img} onPress={showDrawer}>
<Image source={require('../imgs/menu.png')} />
<Icon
name="check"
color="rgba(0, 0, 0, 0.38)"
size={25}
type="entypo"
/>
</TouchableOpacity>
<Text style={styles.text}>Menu</Text>
</View>
);
};
"dependencies": {
"#material-ui/core": "^4.10.2",
"#material-ui/icons": "^4.9.1",
"#react-native-community/masked-view": "^0.1.10",
"#react-navigation/drawer": "^5.8.2",
"#react-navigation/native": "^5.5.1",
"#react-navigation/stack": "^5.5.1",
"react": "16.11.0",
"react-icons": "^3.10.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^3.0.5",
"react-native-screens": "^2.8.0",
"react-native-vector-icons": "^6.6.0"
},
Error: 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.
You are importing Icon the wrong way.
In react-native-vector-icons you should do it this way:
import Icon from 'react-native-vector-icons/SimpleLineIcons'
// and replace SimpleLineIcons with the set of icons you want to use
Here you have full list of the sets.

Reactstrap Card component throws error

The issue is with the reactstrap cards: https://reactstrap.github.io/components/card/
Using reactstrap components like Card, etc is not working.
Component: Version I
import React, { Component } from 'react';
import { Card, Button, CardImg, CardTitle, CardText, CardDeck, CardSubtitle, CardBody } from 'reactstrap';
class MoviesIndex extends Component {
render() {
return (
<CardDeck>
<Card>
<CardImg top width="100%" src="" alt="Movie Poster" />
</Card>
</CardDeck>
);
}
}
export default MoviesIndex;
Output: *It works fine without any errors.
But when I try to use the rest of the components from reactstrap. It throws errors on console.
Component: Version II
import React, { Component } from 'react';
import { Card, Button, CardImg, CardTitle, CardText, CardDeck, CardSubtitle, CardBody } from 'reactstrap';
class MoviesIndex extends Component {
render() {
return (
<CardDeck>
<Card>
<CardImg top width="100%" src="" alt="Movie Poster" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</CardDeck>
);
}
}
export default MoviesIndex;
Output:
package.json
{
"name": "client",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.17.1",
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-transition-group": "^2.2.1",
"reactstrap": "^4.8.0",
"redux": "^3.7.2",
"redux-promise": "^0.5.3"
}
}
I am not able to debug this issue. Please help! TIA.
The components such as CardBody, etc are not available in v4.8.0.
Upgrading to latest release (reactstrap v5.0.0-alpha.4) resolves this issue!
npm install --save reactstrap#5.0.0-alpha.4
Refer to the issue that I created on reactstrap#github for more details:
https://github.com/reactstrap/reactstrap/issues/730
This looks like a typo here:
renderMovies() {
return _.map(this.props.movies, movie => {
Missing )
Try
_.map(this.props.movies, movie) => {
If that doesn't do it, put console.log() after everything to see where it becomes undefined.
This type of error usually results from something not being exported correctly or something being null/undefined due to data missing, etc.
This is a good opportunity for me to recommend using ES Lint, so you can gain extra help 24/7 from the passive display of errors. Check it out if you aren't using it. It's absolutely worth looking into and using.
I won't recommend any specific linting configs in here. That is out of scope of this help. ES Lint will underline code errors such as the missing ) with a red underline, so you will experience less of this kind of thing :)

Resources