Paper.js:81 Uncaught TypeError: Cannot read properties of undefined (reading '1') when using Material UI and Joy UI

Question

I am using react js with material UI together with JoyUI but I am getting a blank screen. My code is shown below:

import React from 'react';
import { CssVarsProvider } from '@mui/joy/styles';
import {Box, Card, CardContent, Container, Grid} from "@mui/material";
import write from "../../assets/images/svg/writing.svg";
import {Button, FormControl, FormLabel, Input, Typography} from "@mui/joy";


const GuardianDetails = () => {
    return (
        <>
            <CssVarsProvider>
                <Container maxWidth="sm">
                    <Card>
                        <CardContent>
                            <Grid container spacing={2} justifyContent="center" alignItems="center">
                                <Grid item xs={8}>
                                    <Box>
                                        <div>
                                            <img src={write} alt="write" width={300} height={300} />
                                        </div>
                                    </Box>
                                </Grid>
                                <Grid item xs={4}>
                                    <Box>
                                        <div>
                                            <Typography level="h4" component="h1">
                                                <b>Welcome!</b>
                                            </Typography>
                                            <Typography level="body2">Sign in to continue.</Typography>
                                        </div>
                                        <FormControl>
                                            <FormLabel>Email</FormLabel>
                                            <Input
                                                // html input attribute
                                                name="email"
                                                type="email"
                                                placeholder="[email protected]"
                                            />
                                        </FormControl>
                                        <FormControl>
                                            <FormLabel>Password</FormLabel>
                                            <Input
                                                // html input attribute
                                                name="password"
                                                type="password"
                                                placeholder="password"
                                            />
                                        </FormControl>

                                        <Button sx={{ mt: 1 /* margin top */ }}>Log in</Button>
                                    </Box>
                                </Grid>
                            </Grid>
                        </CardContent>
                    </Card>
                </Container>
            </CssVarsProvider>
        </>
    );
};

export default GuardianDetails;

Error on Chrome Console: Uncaught TypeError: Cannot read properties of undefined (reading '1')

On terminal: Compiled successfully!

You can now view in the browser.

Local: http://localhost:3000

Note that the development build is not optimized. To create a production build, use npm run build.

webpack compiled successfully

Answer 1

You have to use theme scoping to use Material and Joy UI together (https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/).

import {
  useColorScheme as useMaterialColorScheme,
  Experimental_CssVarsProvider as MaterialCssVarsProvider,
  experimental_extendTheme as extendMaterialTheme,
  THEME_ID
} from "@mui/material/styles";
import {
  CssVarsProvider as JoyCssVarsProvider,
  useColorScheme as useJoyColorScheme
} from "@mui/joy/styles";

const materialTheme = extendMaterialTheme();

<MaterialCssVarsProvider theme={{ [THEME_ID]: materialTheme }}>
  <JoyCssVarsProvider>
    …components
  </JoyCssVarsProvider>
</MaterialCssVarsProvider>

Here is the working sandbox based on your code: https://codesandbox.io/s/using-joy-ui-and-material-ui-together-tx58w5?from-embed=&file=/demo.tsx