createTheme_default is not a function at box.js material ui

Question

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>
    )
}

In my case it was caused by a vite cache issue and I was able to fix it as described in this answer https://stackoverflow.com/a/74916125/5977966 — jouhami, Feb 19 '23 at 21:59
Check this answer: https://stackoverflow.com/a/76017295/15330819 — localhost_3000, Apr 14 '23 at 16:48

score 0 · Answer 1 · answered Jul 11 '23 at 07:19

0

I had the same issue and I fixed it by removing the node_modules/.vite/deps folder and restart the server.

After deleting the folder, run the following commands:

npm i --force and then npm run dev

answered Jul 11 '23 at 07:19

Gabriele Ranzieri

1

score 0 · Answer 2 · answered Aug 02 '23 at 04:04

I had the same problem. I have tried to implement all solutions I found on Stackoverflow or Github but none of them solved the problem.

Then I replace all MUI Box components with MUI Stack components and it worked. As far as I know, MUI Box and MUI Stack components are like siblings. Both are made of the div element. The difference is the MUI Stack component has the display flex style on it.

createTheme_default is not a function at box.js material ui

2 Answers2