-
-
Notifications
You must be signed in to change notification settings - Fork 32.6k
Open
Labels
docsImprovements or additions to the documentationImprovements or additions to the documentationgood first issueGreat for first contributions. Enable to learn the contribution process.Great for first contributions. Enable to learn the contribution process.package: systemSpecific to @mui/systemSpecific to @mui/systemviteAnything related to integration with ViteAnything related to integration with Vite
Description
Steps to reproduce
After migrating to mui v7, the unit tests running on Vitest are not working anymore:
Steps:
- Open this link to live example: https://stackblitz.com/~/github.com/woodreamz/mui7-scStyled-issue (or https://github.com/woodreamz/mui7-scStyled-issue)
- Run
npm install
- Run
npm run test
Current behavior
This error appears:

Expected behavior
It should work like mui 6.
Context
I am using Vite + Vitest with Mui7 and styled-components. I usually use pnpm but to simplify the thing, I used npm. By the way the Using styled-components is not accurate when you work with Vite + Vitest, you must also override styled-engine in the package.json otherwise vitest resolves styled-engine instead of styled-engine-sc.
There is a workaround to make it work. You need to add the fallbackCJS
this in your vite.config.ts:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
// https://vite.dev/config/
export default defineConfig({
test: {
environment: "jsdom",
globals: true,
// #region Uncomment this code to work with Mui v7+
server: {
deps: {
fallbackCJS: true,
},
},
// #endregion
},
plugins: [react(), tsconfigPaths()],
});
I also have a premium license, I don't know if it's required for the mui support.
Thank you!
Your environment
npx @mui/envinfo
System:
OS: macOS 14.1.1
Binaries:
Node: 22.16.0 - ~/.nvm/versions/node/v22.16.0/bin/node
npm: 10.9.2 - ~/.nvm/versions/node/v22.16.0/bin/npm
pnpm: 9.9.0 - ~/Library/pnpm/pnpm
Browsers:
Chrome: 138.0.7204.158
Edge: Not Found
Safari: 17.1
npmPackages:
@mui/core-downloads-tracker: 7.2.0
@mui/material: ^7.2.0 => 7.2.0
@mui/private-theming: 7.2.0
@mui/styled-engine-sc: 7.2.0
@mui/system: 7.2.0
@mui/types: 7.4.4
@mui/utils: 7.2.0
@types/react: ^19.1.8 => 19.1.8
react: ^19.1.0 => 19.1.0
react-dom: ^19.1.0 => 19.1.0
styled-components: ^6.1.19 => 6.1.19
typescript: ~5.8.3 => 5.8.3
Search keywords: vitest mui7 styled-components
bencerf-dc and stevenbriscoecahuscse
Metadata
Metadata
Assignees
Labels
docsImprovements or additions to the documentationImprovements or additions to the documentationgood first issueGreat for first contributions. Enable to learn the contribution process.Great for first contributions. Enable to learn the contribution process.package: systemSpecific to @mui/systemSpecific to @mui/systemviteAnything related to integration with ViteAnything related to integration with Vite