We Keep Coding

createTheme_default is not a function at box.js material ui

I'm trying to use text field from material ui and I use Box element and i got an error message saying that there is an error in box.js. Box.js is a built in file from material and i can't change it. Here's my component codes. I don't understand why the error is in box.js. How can i fix it?
import * as React from 'react';
import Box from '#mui/material/Box';
import Button from '#mui/material/Button';
import styled from "styled-components";
import Layout from '../../Layouts/SideMenu';
import Stack from '#mui/material/Stack';
import TextField from '#mui/material/TextField';
import '#fontsource/roboto/300.css';
import '#fontsource/roboto/400.css';
import '#fontsource/roboto/500.css';
import '#fontsource/roboto/700.css';
const Wrapper = styled.section`
padding: 4em;
`;
export default function Create() {
const [age, setAge] = React.useState('');
return (
<Layout>
<Wrapper>
<form action="">
<Stack spacing={3} direction="column">
<h2>Form Tambah Siswa</h2>
<TextField id="outlined-basic" label="Nama" variant="outlined" />
<Box
component="form"
sx={{
'& > :not(style)': { m: 1, width: '25ch' },
}}
noValidate
autoComplete="off"
>
<TextField id="outlined-basic" label="Email" variant="outlined" />
</Box>
<Box
component="form"
sx={{
'& > :not(style)': { m: 1, width: '25ch' },
}}
noValidate
autoComplete="off"
>
<TextField id="outlined-basic" label="Password" variant="outlined" />
</Box>
<Box
component="form"
sx={{
'& > :not(style)': { m: 1, width: '25ch' },
}}
noValidate
autoComplete="off"
>
<TextField id="outlined-basic" label="Confirm Password" variant="outlined" />
</Box>
<Button variant="contained" type='submit'>Submit</Button>
</Stack>
</form>
</Wrapper>
</Layout>
)
}

Trouble using react to make a user sign in/sign up page with authentication

App.JS file
import React from 'react';
import './App.css';
import {
BrowserRouter as Router,
Routes,
Route,
Link,
Switch,
} from "react-router-dom"
import SignIn from './pages/SignIn.jsx';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<SignIn />}/>
<Route path="/sign-up">
Signup
</Route>
</Routes>
</Router>
);
}
export default App;
SignIn.jsx file
import * as React from 'react';
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 Paper from '#mui/material/Paper';
import Box from '#mui/material/Box';
import Grid from '#mui/material/Grid';
import LockOutlinedIcon from '#mui/icons-material/LockOutlined';
import Typography from '#mui/material/Typography';
import { createTheme, ThemeProvider } from '#mui/material/styles';
function Copyright(props: any) {
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 SignInSide() {
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
console.log({
email: data.get('email'),
password: data.get('password'),
});
};
return (
<ThemeProvider theme={theme}>
<Grid container component="main" sx={{ height: '100vh' }}>
<CssBaseline />
<Grid
item
xs={false}
sm={4}
md={7}
sx={{
backgroundImage: 'url(https://source.unsplash.com/random)',
backgroundRepeat: 'no-repeat',
backgroundColor: (t) =>
t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
/>
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<Box
sx={{
my: 8,
mx: 4,
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" noValidate onSubmit={handleSubmit} 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>
<Copyright sx={{ mt: 5 }} />
</Box>
</Box>
</Grid>
</Grid>
</ThemeProvider>
);
}
The output in the browser is a completely blank page. What I was expecting was a simple login and signup template for the user. I used source code from a material ui sign in side template, from the website https://mui.com/material-ui/getting-started/templates/.
The errors in the jsx file (keyword any on line 16, React.FormEvent line 32) are caused by a "Type annotations can only be used in TypeScript files error". So I tried to change the file to a .tsx, Which solved the errors in the file but still did not give me the output I was looking for in my browser.
In the App function in the App.js file I tried replacing keyword Switch with routes, but I did not see the change I was looking for.
The webpage is supposed to output a simple SignIn and Signup template. The tutorial I am following is https://medium.com/#sanderdebr/building-a-workout-tracker-with-react-and-firebase-part-2-authentication-220e5b863d5b. His code is outdated which is why im running into problems, Im using this tutorial as a prototype project to familiarize me with new technologies react, firebase, material ui.

As mentioned in reactrouter docs if you are using v6 + you shouldn't use Switch anymore (I think they remove it entirely and that is why the last error pops up). The <Switch> component was replaced by <Routes>.
Also as you can see in the previous link form reactrouter docs instead of childrens you should use the property element={...} from <Route
(so something like
<Route path="/sign-up" element={<Signup />} />
. Or to match your case something like <Route path="/sign-up" element={"Signup"} />)
There might be other issues as well (this were the ones that stood out). But without a minimal reproducible example is kind of hard to tell

why i always get this cors error, using cpanel, laravel, reactjs

i always get this error
"Access to XMLHttpRequest at 'http://localhost:8000/sanctum/csrf-cookie' from origin 'http://kekean.pusproset.site' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local."
the error said that the origin doesnt match, but i already changed the baseURL in the axios to match my wesite url. here's my navs.js file
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Main from './container/Main'
import CatalogPage from './container/CatalogPage';
import Navbar from './components/Navbar'
import CssBaseline from '#mui/material/CssBaseline'
import { createTheme, ThemeProvider } from '#mui/material/styles'
import ProductPage from './container/ProductPage';
import Payment from './container/Payment';
import LoginPage from './container/LoginPage';
import RegisterPage from './container/RegisterPage';
import axios from 'axios';
function Navs() {
const catalog = JSON.parse(JSON.stringify(require('./catalog.json')))
const theme = createTheme({
palette: {
primary: {
main: "#FF674D"
},
secondary: {
main: "#7776BC"
},
subtitle : "rgb(0, 0, 0, 31%)"
},
typography: {
"fontFamily": `"Poppins", "Helvetica", "Arial", sans-serif`,
"fontSize": 14,
"fontWeightLight": 300,
"fontWeightRegular": 400,
"fontWeightMedium": 500,
button: {
textTransform: 'none'
}
},
shape: {
borderRadius: 12,
},
breakpoints: {
values: {
mobile: 0,
tablet: 640,
laptop: 1024,
desktop: 1200,
},
},
})
axios.defaults.baseURL = "http://kekean.pusproset.site/";
axios.defaults.headers.post['Accept'] = "application/json";
axios.defaults.headers.post['Content-Type'] = "application/json";
axios.defaults.withCredentials = true;
return (
<ThemeProvider theme={theme}>
<CssBaseline/>
<Router>
<Navbar/>
<Routes>
<Route path="/" exact element={<Main/>}/>
<Route path="/catalog" element={<CatalogPage/>}/>
<Route path='/products/:productId' element={<ProductPage/>}/>
<Route path='/payment' element={<Payment/>}/>
<Route path='/login' element={<LoginPage/>}/>
<Route path='/register' element={<RegisterPage/>}/>
</Routes>
</Router>
</ThemeProvider>
);
}
export default Navs;
if (document.getElementById('app')) {
ReactDOM.render(<Navs/>, document.getElementById('app'));
}
here's my registerPage.js that uses the axios csrf
import {
Box,
Typography,
Grid,
FilledInput,
FormControl,
InputLabel,
Button,
FormHelperText,
} from "#mui/material";
import { makeStyles } from "#mui/styles";
import axios from "axios";
import React from "react";
import swal from "sweetalert";
import { useNavigate } from 'react-router-dom'
const useStyles = makeStyles((theme) => ({
root: {
borderRadius: 10,
},
input: {
"&:-webkit-autofill": {
borderRadius: 10,
},
},
}));
function RegisterPage() {
const history = useNavigate()
const [register, setRegister] = React.useState({
first_name: "",
last_name: "",
address: "",
email: "",
password: "",
number_phone: '',
error_list: [],
});
const handleInput = (e) => {
e.persist();
setRegister({ ...register, [e.target.name]: e.target.value });
};
const registerSubmit = (e) => {
e.preventDefault();
const data = {
first_name: register.first_name,
last_name: register.last_name,
address: register.address,
email: register.email,
password: register.password,
number_phone: register.number_phone,
};
axios.get("/sanctum/csrf-cookie").then((response) => {
axios
.post('/api/register', data)
.then((res) => {
if(res.data.status === 200) {
localStorage.setItem('auth_token', res.data.token)
localStorage.setItem('auth_firstName', res.data.first_name)
swal('Success', res.data.message, "success")
history.push('/')
} else {
setRegister({...register, error_list: res.data.validation_errors})
}
});
});
};
const classes = useStyles();
return (
<Box
display="flex"
justifyContent="center"
alignItems="center"
minHeight="85vh"
>
<Box
textAlign={"center"}
sx={{ border: "1px solid #CACACA", borderRadius: "16px" }}
p={3}
>
<Typography fontSize={"28px"}>
Daftar untuk belanja
<Box
component={"span"}
sx={{ color: "#FF674D", fontSize: "36px" }}
>
.
</Box>
</Typography>
<Typography color="#939393" fontSize={"12px"}>
Sudah punya akun?{" "}
<Box
component={"span"}
sx={{ color: "#FF674D", fontSize: "12px" }}
>
Masuk Sekarang
</Box>
</Typography>
<form onSubmit={registerSubmit}>
<Grid container sx={{ maxWidth: 450, mt: 2 }} spacing={2}>
<Grid item mobile={6}>
<FormControl error={register.error_list.first_name?true:false} fullWidth variant="filled">
<InputLabel htmlFor="component-filled">
First Name
</InputLabel>
<FilledInput
id="component-filled"
disableUnderline={true}
onChange={handleInput}
name="first_name"
value={register.first_name}
classes={{
root: classes.root,
input: classes.input,
}}
/>
<FormHelperText sx={{fontSize: 10}}>{register.error_list.first_name}</FormHelperText>
</FormControl>
</Grid>
<Grid item mobile={6}>
<FormControl error={register.error_list.last_name?true:false} fullWidth variant="filled">
<InputLabel htmlFor="component-filled">
Last Name
</InputLabel>
<FilledInput
id="component-filled"
disableUnderline={true}
onChange={handleInput}
value={register.last_name}
name="last_name"
classes={{
root: classes.root,
input: classes.input,
}}
/>
<FormHelperText sx={{fontSize: 10}}>{register.error_list.last_name}</FormHelperText>
</FormControl>
</Grid>
<Grid item mobile={12}>
<FormControl error={register.error_list.address?true:false} fullWidth variant="filled">
<InputLabel htmlFor="component-filled">
Address
</InputLabel>
<FilledInput
id="component-filled"
disableUnderline={true}
onChange={handleInput}
value={register.address}
name="address"
classes={{
root: classes.root,
input: classes.input,
}}
/>
<FormHelperText>{register.error_list.address}</FormHelperText>
</FormControl>
</Grid>
<Grid item mobile={12}>
<FormControl error={register.error_list.number_phone?true:false} fullWidth variant="filled">
<InputLabel htmlFor="component-filled">
Phone Number
</InputLabel>
<FilledInput
id="component-filled"
disableUnderline={true}
onChange={handleInput}
value={register.number_phone}
name="number_phone"
classes={{
root: classes.root,
input: classes.input,
}}
/>
<FormHelperText>{register.error_list.number_phone}</FormHelperText>
</FormControl>
</Grid>
<Grid item mobile={12}>
<FormControl error={register.error_list.email?true:false} fullWidth variant="filled">
<InputLabel htmlFor="component-filled">
Email
</InputLabel>
<FilledInput
id="component-filled"
disableUnderline={true}
value={register.email}
onChange={handleInput}
name="email"
classes={{
root: classes.root,
input: classes.input,
}}
/>
<FormHelperText>{register.error_list.email}</FormHelperText>
</FormControl>
</Grid>
<Grid item mobile={12}>
<FormControl error={register.error_list.password?true:false} fullWidth variant="filled">
<InputLabel htmlFor="component-filled">
Password
</InputLabel>
<FilledInput
id="component-filled"
disableUnderline={true}
onChange={handleInput}
value={register.password}
type="password"
name="password"
classes={{
root: classes.root,
input: classes.input,
}}
/>
<FormHelperText>{register.error_list.password}</FormHelperText>
</FormControl>
</Grid>
<Grid item mobile={12}>
<FormControl error={register.error_list.password?true:false} fullWidth variant="filled">
<InputLabel htmlFor="component-filled">
Confirm Password
</InputLabel>
<FilledInput
id="component-filled"
disableUnderline={true}
onChange={handleInput}
type="password"
name="confirmPassword"
classes={{
root: classes.root,
input: classes.input,
}}
/>
</FormControl>
</Grid>
</Grid>
<Box
display="flex"
justifyContent="center"
alignItems="center"
>
<Button
type="submit"
variant="contained"
disableElevation={true}
sx={{ mt: 3, mr: 2 }}
>
<Typography color="white" sx={{ px: 6, py: 1 }}>
Daftar
</Typography>
</Button>
</Box>
</form>
</Box>
</Box>
);
}
export default RegisterPage;

(MUI 5) styled Componants throwing error in browser theme.palette[ownerState.color] is undefined

I'm having an issue with the latest version of Mui. I'm using a Theme to change the default styling of a text field input the error code has something to do with "./node_modules/#mui/material/FormLabel/FormLabel.js/FormLabelRoot<" I've got the following dependencies
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.1",
"#mui/material": "^5.0.1",
If anyone has an idea I'd love to hear it :)
import React, { useState } from "react"
import { Button, createTheme, Grid, TextField, Tooltip } from "#mui/material"
import { ThemeProvider } from "#mui/system"
import { AddRounded, CalendarToday, Phone, Email, SearchOutlined, People, Work } from "#mui/icons-material"
import { orange } from "#mui/material/colors"
function App() {
//logic
const [contacts, setContacts] = useState([])
const [addFormData, setAddFormData] = useState({
name: "", email: "", phone: "", dateCreated: "", area: ""
})
/* search reflects the value of the googleesque, search bar. */
const [search, setSearch] = useState("")
/* refrlcts the */
const [searchResults, setSearchResults] = useState([])
const handleAddFormChange = (e) => {
e.preventDefault()
const fieldName = e.target.getAttribute("name")
console.log(fieldName)
let fieldValue = e.target.value
console.log(fieldValue)
const newFormData = { ...addFormData }
newFormData[fieldName] = fieldValue
setAddFormData(newFormData)
}
const handleAddFormSubmit = (e) => {
e.preventDefault()
const newContact = {
name: addFormData.name,
email: addFormData.email,
phone: addFormData.phone,
dateCreated: addFormData.dateCreated,
area: addFormData.area,
split: addFormData.split
}
const newContacts = [...contacts, newContact]
setContacts(newContacts)
}
const handleSearch = (e) => {
e.preventDefault()
setSearch(e.target.value)
if (search !== "") {
const newContactList = contacts.filter((contact) => {
console.log(Object.values(contact).join(" ").toLowerCase())
return Object.values(contact).join(" ").toLowerCase().includes(search.toLowerCase())
})
console.log(search)
console.log(Object.values(contacts).join(" ").toLowerCase())
setSearchResults(newContactList)
} else {
setSearchResults(contacts)
}
}
const theme = createTheme({
palette: {
primary: {
// Purple and green play nicely together.
main: orange[500],
},
},
});
return (
<>
<ThemeProvider theme={theme}>
<Grid container spacing={1} alignItems="center" >
<Grid item>
<SearchOutlined />
</Grid>
<Grid item style={{ marginBottom: "15px", marginTop: "15px" }} >
<TextField type="text" variant="outlined" label="Search" onChange={handleSearch} />
</Grid>
</Grid>
<div >
{/* Main Container with soacing between pairs set to (3) */}
<Grid container spacing={3} >
{/* First pair, people icon + name input */}
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
{/* icon */}
<Tooltip title="Name" placement="bottom" arrow>
<People />
</Tooltip>
</Grid>
<Grid item>
{/* input */}
<TextField label="Name" variant="outlined" id="name" name="name" type="text" onChange={handleAddFormChange} />
</Grid>
</Grid>
</Grid>
{/* Second pair */}
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
{/* icon */}
<Tooltip title="what's your name" placement="bottom" arrow>
<Work />
</Tooltip>
</Grid>
<Grid item>
{/* Input */}
<TextField label="Area" variant="outlined" color="colME" id="area" name="area" type="text" onChange={handleAddFormChange} />
</Grid>
</Grid>
</Grid>
{/* Third Pair */}
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
{/* Icon */}
<Tooltip title="name#example.com" placement="bottom" arrow>
<Email />
</Tooltip>
</Grid>
<Grid item>
{/* input */}
<TextField label="Email" variant="outlined" id="email" name="email" type="text" onChange={handleAddFormChange} />
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
{/* Icon */}
<Tooltip title="Ex:(0049)15208513630" placement="bottom" arrow>
<Phone />
</Tooltip>
</Grid>
<Grid item>
{/* Input */}
<TextField label="phone" variant="outlined" id="dateCreated" name="phone" type="text" onChange={handleAddFormChange} />
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
{/* Icon */}
<Tooltip title="Format:dd/mm/yyyy" placement="bottom" arrow>
<CalendarToday />
</Tooltip>
</Grid>
<Grid item>
{/* Input */}
<TextField label="Date" variant="outlined" id="dateCreated" name="dateCreated" type="text" onChange={handleAddFormChange} />
</Grid>
</Grid>
</Grid>
</Grid>
<Button style={{ marginBottom: "15px", marginTop: "15px", }} onClick={handleAddFormSubmit} variant="contained" startIcon={<AddRounded />}>
Add
</Button>
</div>
</ThemeProvider>
{/* if there less than 1 character in the search bar render the normal contacts, if not render only the contacts that match the search input... */}
{/* <ContactList contacts={search.length < 1 ? contacts : searchResults} key={contacts.id} /> */}
</>
);
}
export default App;

OP solved their problem, but for those like me that had a similar issue, be sure to check these few things. I'm experiencing these issues since I've upgraded our code-base to the latest version of Material UI.
The issue appears when you use a color or variant prop value not supported in a given component, usually Button, IconButton, or TextField.
Previously color="default" was just fine, but I realized that default was no longer supported. It's current equivalent is inherit.
If you want to support a custom color, you can create a theme that supports that. Read here: Adding new colors (mui.com)

Server Error ReferenceError: window is not defined This error happened while generating the page

I want to add Microsoft Login Button in Next Js using material Ui but
when I add package from NPM and refresh the page I got the above
error.
When I Assign ClientId="a973536f-eb3e-4fd9-9394-9f4194d69153" to Microsoft component as shown below I got the above error. How to cope with this error.
import React from "react";
import { Grid, Container, Checkbox, IconButton, FormControlLabel, TextField, Button, Link } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
import Icon from "#material-ui/core/Icon";
import { loadCSS } from "fg-loadcss";
import FacebookLogin from "react-facebook-login/dist/facebook-login-render-props";
import { GoogleLogin } from "react-google-login";
import MicrosoftLogin from "react-microsoft-login";
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(0),
display: "flex",
flexDirection: "column",
alignItems: "center",
height: '60vh',
},
background: {
backgroundColor: "#220E1A",
borderRadius: "5px",
color: "white",import React from "react";
import { Grid, Container, Checkbox, IconButton, FormControlLabel, TextField, Button, Link } from "#material-ui/core";
import { makeStyles } from "#material-ui/core/styles";
import Icon from "#material-ui/core/Icon";
import { loadCSS } from "fg-loadcss";
import FacebookLogin from "react-facebook-login/dist/facebook-login-render-props";
import { GoogleLogin } from "react-google-login";
import MicrosoftLogin from "react-microsoft-login";
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(0),
display: "flex",
flexDirection: "column",
alignItems: "center",
height: '60vh',
},
background: {
backgroundColor: "#220E1A",
borderRadius: "5px",
color: "white",
},
form: {
width: "70%", // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
input1: {
background: "white",
borderRadius: "25px",
color: "white",
},
submit: {
margin: theme.spacing(1, 0, 1),
borderRadius: "25px",
},
buttonGroup: {
borderRadius: "50px",
margin: theme.spacing(2, 0, 2, 0),
},
winIcon: {
padding: '0px',
margin: '0px',
width: '10px'
}
}));
export default function SignIn() {
const classes = useStyles();
//Load Fonts awesome icons
React.useEffect(() => {
const node = loadCSS(
"https://use.fontawesome.com/releases/v5.12.0/css/all.css",
document.querySelector("#font-awesome-css")
);
return () => {
node.parentNode.removeChild(node);
};
}, []);
//google facebook,Microsoft Login response
const responseFacebook = (response) => {
console.log(response);
};
const responseGoogle = (response) => {
console.log(response);
};
const authHandler = (err, data) => {
console.log(err, data);
};
return (
<Container maxWidth="xm" className={classes.background}>
<div className={classes.paper}>
<form className={classes.form} noValidate>
<TextField
className={classes.input1}
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoFocus
variant="filled"
/>
<TextField
className={classes.input1}
variant="filled"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<Grid
container
direction="column"
justify="center"
alignItems="center"
>
<Grid item >
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Stay signed in"
/>
</Grid>
<Grid item>
<Button
type="submit"
medium
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
</Grid>
<Grid item>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<h3 align="center">Or Via</h3>{" "}
<FacebookLogin
appId="225241158739281"
autoLoad
callback={responseFacebook}
render={(renderProps) => (
<IconButton color="primary" onClick={renderProps.onClick}>
<Icon className="fab fa-facebook" />
</IconButton>
)}
/>
<GoogleLogin
clientId="500452257814-peb71oi9612hv04svvfpvfrtch6pc5br.apps.googleusercontent.com"
render={(renderProps) => (
<IconButton
onClick={renderProps.onClick}
>
{" "}
<Icon className="fab fa-google" color="primary" />
</IconButton>
)}
buttonText="Login"
onSuccess={responseGoogle}
onFailure={responseGoogle}
cookiePolicy={"single_host_origin"}
/>
//**Problem is here IN MicrosoftLogin when i assign Id it creates the above error.**
<MicrosoftLogin
// clientId="a973536f-eb3e-4fd9-9394-9f4194d69153"
authCallback={authHandler}
redirectUri="https://localhost:3000/"
className={classes.winIcon}
children={
<IconButton>
<Icon className="fab fa-windows" color="primary" />
</IconButton>}
/>
</Grid>
</Grid>
</form>
</div>
</Container>
);
}
},
form: {
width: "70%", // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
input1: {
background: "white",
borderRadius: "25px",
color: "white",
},
submit: {
margin: theme.spacing(1, 0, 1),
borderRadius: "25px",
},
buttonGroup: {
borderRadius: "50px",
margin: theme.spacing(2, 0, 2, 0),
},
winIcon: {
padding: '0px',
margin: '0px',
width: '10px'
}
}));
export default function SignIn() {
const classes = useStyles();
//Load Fonts awesome icons
React.useEffect(() => {
const node = loadCSS(
"https://use.fontawesome.com/releases/v5.12.0/css/all.css",
document.querySelector("#font-awesome-css")
);
return () => {
node.parentNode.removeChild(node);
};
}, []);
//google facebook,Microsoft Login response
const responseFacebook = (response) => {
console.log(response);
};
const responseGoogle = (response) => {
console.log(response);
};
const authHandler = (err, data) => {
console.log(err, data);
};
return (
<Container maxWidth="xm" className={classes.background}>
<div className={classes.paper}>
<form className={classes.form} noValidate>
<TextField
className={classes.input1}
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoFocus
variant="filled"
/>
<TextField
className={classes.input1}
variant="filled"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<Grid
container
direction="column"
justify="center"
alignItems="center"
>
<Grid item >
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Stay signed in"
/>
</Grid>
<Grid item>
<Button
type="submit"
medium
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
</Grid>
<Grid item>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<h3 align="center">Or Via</h3>{" "}
<FacebookLogin
appId="225241158739281"
autoLoad
callback={responseFacebook}
render={(renderProps) => (
<IconButton color="primary" onClick={renderProps.onClick}>
<Icon className="fab fa-facebook" />
</IconButton>
)}
/>
<GoogleLogin
clientId="500452257814-peb71oi9612hv04svvfpvfrtch6pc5br.apps.googleusercontent.com"
render={(renderProps) => (
<IconButton
onClick={renderProps.onClick}
>
{" "}
<Icon className="fab fa-google" color="primary" />
</IconButton>
)}
buttonText="Login"
onSuccess={responseGoogle}
onFailure={responseGoogle}
cookiePolicy={"single_host_origin"}
/>
//**Problem is here IN MicrosoftLogin when i assign Id it creates the above error.**
<MicrosoftLogin
// clientId="a973536f-eb3e-4fd9-9394-9f4194d69153"
authCallback={authHandler}
redirectUri="https://localhost:3000/"
className={classes.winIcon}
children={
<IconButton>
<Icon className="fab fa-windows" color="primary" />
</IconButton>}
/>
</Grid>
</Grid>
</form>
</div>
</Container>
);
}

It's related to server side rendering and client side rendering.
As Next.js provides SSR, you need to consider using objects like window, localStorage and so on. While compiling client side, those objects are fine but when Nextjs compiles server side, it shows error like you shared.
It seems like GoogleLogin uses window object if you assign the client id. You need to check that first. And lemme know the result.

Hey the easy way for Material UI Components, to rendered it on Next js framework.Just use component to render it on client side only.
(If any component use Window object on server side it will show this error)
solution:
import NoSsr from '#material-ui/core/NoSsr';
<NoSsr>
<MicrosoftLogin
clientId="a973536f-eb3e-4fd9-9394-9f4194d69153"
authCallback={authHandler}
redirectUri="https://localhost:3000/"
className={classes.winIcon}
children={
<IconButton>
<Icon className="fab fa-windows" color="primary" />
</IconButton>
}
/>
</NoSsr>