[core] Adopt pnpm catalogs for React deps

[aarongarciah]

Adopts pnpm catalogs for React dependencies to have an easier way to share the same version between different packages.

This will also make it easier to fix the react-next CI pipeline by having a centralized place to upgrade React packages versions. The useReactVersion.js script is very outdated and the react-next pipeline has been broken for a long time.

---

Q: we have some packages under test/bundling/fixtures that define their own React version. Do we want these to use the centralized React version, too?

[mui-bot]

Netlify deploy preview

https://deploy-preview-43455--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 8d11924

[Janpot]

One drawback I could think of us that it's now harder for tooling to statically analyze the versions in package.json. Was the pnpm update -r method not working for react?

[aarongarciah]

Was the pnpm update -r method not working for react?

It should work for react, react-dom, react-is, etc. Bur for the React 19 type packages, afaik there's no way to run pnpm update and point those packages (e.g. @types/react) to npnpm:[email protected]. Do you know if there's a way to achieve it? If these were regular npm versions, I guess pnpm update -r should work.

But I agree catalogs can come with some downsides e.g. doesn't support pnpm update just yet (https://pnpm.io/catalogs#caveats), it's a "propietary" syntax, etc. On the other side, the group of React dependencies is probably special and automatic updates are probably not that important. With catalogs, we also get this functionality for free: https://github.com/mui/material-ui/blob/master/scripts/useReactVersion.mjs#L23-L27

[aarongarciah]

This is what a script should do to change React packages versions: 810387c#diff-18ae0a0fab29a7db7aded913fd05f30a2c8f6c104fadae86c9d217091709794c

The idea would be to keep in pnpm-workspace.yaml all of the different catalog versions (react19, react17, etc.) so a script would only require to replace the catalog: block with the desired version block.

[cherniavskii]

The idea would be to keep in pnpm-workspace.yaml all of the different catalog versions (react19, react17, etc.) so a script would only require to replace the catalog: block with the desired version block.

Alternatively: keep multiple pnpm-workspace.yaml files and rename the one we want to use 🤔

[aarongarciah]

Alternatively: keep multiple pnpm-workspace.yaml files and rename the one we want to use 🤔

That's a great idea. The only downside I can think of is parts of the file getting out of sync (e.g. the packages list)

[Janpot]

afaik there's no way to run pnpm update and point those packages (e.g. @types/react) to npnpm:[email protected].

This should work:

pnpm update -r @types/react@npm:[email protected]

I'm a bit hesitant using catalogs as it doesn't feel like a cemented feature in package managers, it doesn't seem like even pnpm has fully adopted support for it. If a classic solution works just as well, I think I'd prefer it over creating potential tech debt. And in any case, once pnpm adds support for catalogs in their update command, I believe our solution would look very similar. (e.g. pnpm update-catalog default @types/react@npm:[email protected])

[aarongarciah]

This should work:

pnpm update -r @types/react@npm:[email protected]

TIL! I thought using npm: caused an error. Thanks!

I totally agree with your points. I'll close this experiment

[aarongarciah]

In case someone lands on this PR while adopting catalogs in the future, a benefit of catalogs is being able to specify them in peerDependencies, too. While pnpm update -r react@next would update all dependencies/devDependencies, there are occasions where peerDependencies fields also need to be updated. That's the case for

material-ui/packages-internal/test-utils/package.json

Lines 65 to 68 in 08ea93e

	"peerDependencies": {
	"react": "^18.2.0",
	"react-dom": "^18.2.0"
	},

. If these peerDependencies fields are not updated, wrong package versions get installed.