[SOLVED] Unable to use Grid2 with Vite project

Unable to use Grid2 with Vite project

I'm having an issue with MUI Grid2 in my Vite project. I get the following in my in my console:

Grid2.js:5 Uncaught TypeError: styled_default is not a function
at Grid2.js:5:26

I noticed that there was a similar post: https://stackoverflow.com/questions/76213917/uncaught-typeerror-styled-default-is-not-a-function-at-grid2-js526, but didn't notice any real answers for the problem.

My Package.json: Thought that there might have been an import issue, but I don't notice anything out of the ordinary.

    {
    "name": "workoutjournal",
    "proxy": "http://localhost:8080",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "preview": "vite preview"
    },
    "dependencies": {
        "@emotion/react": "^11.11.1",
        "@emotion/styled": "^11.11.0",
        "@fontsource/staatliches": "^5.0.1",
        "@headlessui/react": "^1.7.15",
        "@heroicons/react": "^2.0.18",
        "@mui/icons-material": "^5.11.11",
        "@mui/material": "^5.11.15",
        "@mui/styled-engine-sc": "^5.11.11",
        "eslint": "^8.37.0",
        "http-proxy-middleware": "^2.0.6",
        "install": "^0.13.0",
        "npm": "^9.6.3",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-hook-form": "^7.43.9",
        "react-router-dom": "^6.10.0",
        "styled-components": "^5.3.9",
        "tailwindcss": "^3.3.2"
    },
    "devDependencies": {
        "@svgr/cli": "^8.0.1",
        "@types/react": "^18.0.28",
        "@types/react-dom": "^18.0.11",
        "@vitejs/plugin-react": "^3.1.0",
        "autoprefixer": "^10.4.14",
        "postcss": "^8.4.24",
        "prettier": "^2.8.8",
        "typescript": "^5.0.3",
        "vite": "^4.2.0"
    }
}

I've also deleted my node_modules and ran yarn install, but to no avail. This is my import for it, import Grid from '@mui/material/Unstable_Grid2'; How I am trying to use it:

 <Grid
                container
                spacing={2}
                columns={16}
            >
                <Grid xs={8}>
                    <Item>xs=8</Item>
                </Grid>
                <Grid xs={8}>
                    <Item>xs=8</Item>
                </Grid>
            </Grid>

I've used it in the past with CRA, but this is the first time I've tried to use it with Vite. Any help is greatly appreciated!

Solution

Try importing Grid2 this way:

import Grid from '@mui/material/Unstable_Grid2/Grid2';

Per GH discussion: https://github.com/mui/material-ui/issues/32727#issuecomment-1563834184