I just started leanring REACT and am following this youtube tutorial. I copied some code for an Appbar from material-ui's website but I'm getting these errors and I'm not sure how to fix them (I basically followed the youtube video exactly, and the guy in the video didn't get any errors).
This is my App.js file:
import './App.css';
import AppBar from './AppBar';
function App() {
return (
<div className="App">
<AppBar/>
</div>
);
}
export default App;
And this is my AppBar.js:
import * as React from 'react';
import AppBar from '#mui/material/AppBar';
import Box from '#mui/material/Box';
import Toolbar from '#mui/material/Toolbar';
import Typography from '#mui/material/Typography';
import Button from '#mui/material/Button';
import IconButton from '#mui/material/IconButton';
import MenuIcon from '#mui/icons-material/Menu';
export default function ButtonAppBar() {
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Box>
);
}
And these are the errors from chrome (the code does compile in vs code tho).
Does anyone know why this is happening and how to fix it? Thank you!
Related
I'm working on a project using React for GUI, electron and realm.
Everything works fine until I try to Import a "component" from the other .js file
Here is my App.js import section:
import logo from './logo.svg';
import './App.css';
import * as Realm from 'realm';
import Avatar from '#mui/material/Avatar';
import Button from '#mui/material/Button';
import CssBaseline from '#mui/material/CssBaseline';
import TextField from '#mui/material/TextField';
import FormControlLabel from '#mui/material/FormControlLabel';
import Checkbox from '#mui/material/Checkbox';
import Link from '#mui/material/Link';
import Grid from '#mui/material/Grid';
import Box from '#mui/material/Box';
import LockOutlinedIcon from '#mui/icons-material/LockOutlined';
import Typography from '#mui/material/Typography';
import Container from '#mui/material/Container';
import { createTheme, ThemeProvider } from '#mui/material/styles';
import Signin from './Signin';
and my Signin.js file look likes this :
import Avatar from '#mui/material/Avatar';
import Button from '#mui/material/Button';
import CssBaseline from '#mui/material/CssBaseline';
import TextField from '#mui/material/TextField';
import FormControlLabel from '#mui/material/FormControlLabel';
import Checkbox from '#mui/material/Checkbox';
import Link from '#mui/material/Link';
import Grid from '#mui/material/Grid';
import Box from '#mui/material/Box';
import LockOutlinedIcon from '#mui/icons-material/LockOutlined';
import Typography from '#mui/material/Typography';
import Container from '#mui/material/Container';
import { createTheme, ThemeProvider } from '#mui/material/styles';
function Copyright(props) {
return (
<Typography variant="body2" color="text.secondary" align="center" {...props}>
{'Copyright © '}
<Link color="inherit" href="https://mui.com/">
Your Website
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
const theme = createTheme();
export default function SignIn() {
const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
// eslint-disable-next-line no-console
console.log({
email: data.get('email'),
password: data.get('password'),
});
};
return (
<ThemeProvider theme={theme}>
<Container component="main" maxWidth="xs">
<CssBaseline />
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
<TextField
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</Box>
</Box>
<Copyright sx={{ mt: 8, mb: 4 }} />
</Container>
</ThemeProvider>
);
}
here is the error I get in the BrowserWindow console :
Uncaught Error: require() of ES Module C:\Users\valco\Documents\GATO\Main\my_electron_react_application\node_modules\#babel\runtime\helpers\esm\defineProperty.js from C:\Users\valco\Documents\GATO\Main\my_electron_react_application\build\index.html not supported.
Instead change the require of defineProperty.js in C:\Users\valco\Documents\GATO\Main\my_electron_react_application\build\index.html to a dynamic import() which is available in all CommonJS modules.
at __node_internal_captureLargerStackTrace (node:internal/errors:464)
at new NodeError (node:internal/errors:371)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1144)
at Module.load (node:internal/modules/cjs/loader:988)
at Module._load (node:internal/modules/cjs/loader:829)
at Function.c._load (node:electron/js2c/asar_bundle:5)
at Function.o._load (node:electron/js2c/renderer_init:33)
at Module.require (node:internal/modules/cjs/loader:1012)
at require (node:internal/modules/cjs/helpers:94)
at Object.<anonymous> (defineProperty":1)
at l (index.html:1)
at Module.<anonymous> (main.e3312a17.chunk.js:1)
at l (index.html:1)
at r (index.html:1)
at Array.t [as push] (index.html:1)
at main.e3312a17.chunk.js:1
I know it may have something to do with ES6 and require, or node version, or node-fetch,
Because of realm, I cant just start the script I have to go through a CRADO build before.
When I dont try to import Signin, everything works just fine but as soon as I try to import it... I get this error.
I found the why of the problem :
My app.js is based on React-Native while the Signin.js is React.
It seems like Realm cant work with React..?
I have following code in react:
import "./App.css";
import { dark_theme } from "./themes";
import { ThemeProvider, Toolbar } from "#mui/material";
import AppBar from "#mui/material/AppBar";
import Box from "#mui/material/Box";
import Drawer from "#mui/material/Drawer";
import Typography from "#mui/material/Typography";
import { Accordion, AccordionDetails, AccordionSummary } from "#mui/material";
function App() {
return (
<ThemeProvider theme={dark_theme}>
<Box
sx={{
backgroundColor: "background.default",
width: "100vw",
height: "100vh",
}}
display={"flex"}
>
<AppBar>
<Toolbar>
<Typography>workspace</Typography>
</Toolbar>
</AppBar>
<Drawer
id={"left-drawer"}
open={true}
variant={"persistent"}
anchor={"left"}
sx={{
color: "primary.main",
backgroundColor: "background.default",
"& .MuiDrawer-paper": {
width: 200,
boxSizing: "border-box",
p: 2,
},
}}
>
<Accordion>
<AccordionSummary>
<Typography>objects</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>objects</Typography>
</AccordionDetails>
</Accordion>
</Drawer>
</Box>
</ThemeProvider>
);
}
export default App;
even though AppBar and Drawer are parallel the Drawer extends above the AppBar and all the content below.
how can i make it so the Drawer pushes AppBar and all the contents below to right side when its extended, rather than covering everything rendered below?
btw dark_theme only has color and font.
I'm having issues with changing <AppBar> background color. I'm using the Container component to set the maximum screen size.
This causes issues when the screen size is bigger than the maximum screen size. The AppBar background color is expected the rest is white.
How do I remove the white color and make it match the <AppBar> background color?
How do I get it so that white color to match the <AppBar> color so that the navigation looks consistent?
This is what I have so far:
import React from 'react';
import {CssBaseline, Container} from '#material-ui/core/';
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}));
export default function ButtonAppBar() {
const classes = useStyles();
return (
<div className={classes.root}>
<CssBaseline />
<Container maxWidth="sm">
<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>
</Container>
</div>
);
}
What am I missing?
The navigation looks wired because it's surrounded by white.
You can go in your css file and add:
body {
background-color: #FF0000;
}
Place the AppBar outside the div with the class of root or remove the width from root class.
ADDED:
<div>
<AppBar position="static">
<Toolbar style={{ maxWidth: 1280 }}>
// ...
</Toolbar>
</AppBar>
<Container>
// ...
</Container>
</div>
I have a material UI drawer and I can open it but when I try to close it the event is not even called.
import React from 'react';
import './App.css';
import { fade, makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import IconButton from '#material-ui/core/IconButton';
import Typography from '#material-ui/core/Typography';
import InputBase from '#material-ui/core/InputBase';
import Badge from '#material-ui/core/Badge';
import MenuItem from '#material-ui/core/MenuItem';
import Menu from '#material-ui/core/Menu';
import MenuIcon from '#material-ui/icons/Menu';
import SearchIcon from '#material-ui/icons/Search';
import AccountCircle from '#material-ui/icons/AccountCircle';
import MailIcon from '#material-ui/icons/Mail';
import HomeIcon from '#material-ui/icons/Home';
import NotificationsIcon from '#material-ui/icons/Notifications';
import MoreIcon from '#material-ui/icons/MoreVert';
import InputAdornment from "#material-ui/core/InputAdornment";
import Drawer from '#material-ui/core/Drawer';
import ChevronLeftIcon from '#material-ui/icons/ChevronLeft';
import ChevronRightIcon from '#material-ui/icons/ChevronRight';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import List from '#material-ui/core/List';
import Divider from '#material-ui/core/Divider';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
drawerOpen : false
};
this.handleDrawerOpen = this.handleDrawerOpen.bind(this);
this.handleDrawerClosed = this.handleDrawerClosed.bind(this);
}
handleDrawerOpen() {
this.setState({drawerOpen : true});
console.log("open");
}
handleDrawerClosed() {
this.setState({drawerOpen : false});
console.log("close");
}
render() {
return (
<div className={"topBar"}>
<AppBar >
<Toolbar className={"topBar"}>
<div className="divInside">
<IconButton
edge="start"
color="inherit"
onClick={this.handleDrawerOpen}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
Top Questions
</Typography>
</div>
<div className={"divInside"} style={{"minWidth" : "50%"}}>
<SearchIcon />
<InputBase
fullWidth={true}
placeholder="Search…"
/>
</div>
<div>
<IconButton color="inherit">
<Badge badgeContent={22} color="secondary">
<NotificationsIcon />
</Badge>
</IconButton>
<IconButton
edge="end"
color="inherit"
>
<AccountCircle />
</IconButton>
</div>
</Toolbar>
</AppBar>
<Drawer
variant="persistent"
anchor="left"
open={this.state.drawerOpen}
>
<div onClick={this.handleDrawerClose}>
<IconButton onClick={this.handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List>
{['Home', 'Categories'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index === 0 ? <HomeIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
</div>
);
}
}
What is the problem? I literally copied the example for persistent drawer from https://material-ui.com/components/drawers/
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.
Your handler is called handleDrawerClosed but you are calling handleDrawerClose (without a 'd' on the end).
Update your handler to match the open handler and re-name it to handleDrawerClose
Also, use an IDE that will highlight problems like this for you automatically and save you time and frustration :-D
I have an AppBar component and I want to combine it with a drawer, this is the AppBar code:
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";
import TemporaryDrawer from "./Drawer";
const styles = {
root: {
width: "100%"
},
flex: {
flex: 1
},
menuButton: {
marginLeft: -12,
marginRight: 20
},
};
function ButtonAppBar(props) {
const { classes } = props;
return (
<div className={classes.root}>
<TemporaryDrawer/>
<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">Drawer</Button>
</Toolbar>
</AppBar>
</div>
);
}
ButtonAppBar.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(ButtonAppBar);
Currently I'm using material-ui v1.0.0-beta.33, what I want is to open a drawer on the left side when click on the Button I have in AppBar but I have no idea how to do this.
I'll appreciate the help on this.
If I understand you correctly you can do it this way - store the boolean value that indicates is the drawer is opened in the state of your component:
state = { drawerIsOpen: false }
You will change it when user clicks on your Button:
handleDrawerOpen = () => {
this.setState({ drawerIsOpen: true });
};
Your render method should look like this:
render() {
const { classes } = this.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 onClick={this.handleDrawerOpen} color="inherit">Drawer</Button>
</Toolbar>
</AppBar>
<Drawer
variant="persistent"
classes={{
paper: classes.drawerPaper,
}}
open={this.state.drawerIsOpen}
>
<div className={classes.drawerHeader}>
<IconButton onClick={this.handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<div className={classes.drawerInner}>
<p>drawer content</p>
</div>
</Drawer>
</div>
);
}
Check this simplified demo (see demo.js file).