Material UI v7 beta

[DiegoAndai]

We’re excited to announce that the Material UI v7 beta is available today.

This release modernizes the library and fixes some upvoted issues. Here are the highlights:

• The library’s package layout has been updated to improve ESM support. This solves several issues when integrating with the latest versions of Vite, Remix, and Webpack.
• Standardization of the slot pattern to increase consistency between components.
• Reduction in DX bloat by removing deprecated APIs.

You can check the entire list of issues that will be included in v7 here: https://github.com/mui/material-ui/milestone/48

To try it out, please follow the upgrade guide.

We appreciate you testing this out and providing any feedback you have, which you can do in this discussion. If you encounter a bug, please report it as a separate issue.

[ShriyasnhAgarwl]

Much needed for us :)

[alexwork1611]

[Janpot]

maybe you could provide Stackblitz or CodeSandBox templates, thank you

Would this work for you as a template?

[alexwork1611]

maybe you could provide Stackblitz or CodeSandBox templates, thank you

Would this work for you as a template?

Yes, that's perfect. Thank you!

I was able to figure it out. It's the module resolution setting in my project. I am currently using Bundler.

So here's what I found:

• I am certain that the type errors were caused by 7.0.0-beta.3 and my module resolution set to Bundler (which I can't change, due to the collection of packages I'm using - TanStack Start);
• If I change the module resolution to Node, the MUI errors go away, but I get a bunch of other errors;
• I will stick to 7.0.0-beta.2 for now.

Some screenshots:

With beta 2:

With beta 3:

The screenshots above are with the following TS config:

{
	"extends": [
		"@tsconfig/strictest/tsconfig.json"
	],
	"compilerOptions": {
		"baseUrl": ".",
		"module": "ESNext",
		"target": "ES2022",
		"moduleResolution": "Bundler",
		"jsx": "react-jsx",
		"erasableSyntaxOnly": true,
		"resolveJsonModule": true,
		"noEmit": true,
		"forceConsistentCasingInFileNames": true
	},
}

[Janpot]

Bundler should be perfectly fine to use with Material UI. Can reproduce in https://stackblitz.com/edit/github-crm6h7ge?file=src%2FApp.tsx.

[DiegoAndai]

I've created an issue so we can track this: #45510