[pickers] Add `@mui/system` to install docs to avoid missing peer dependency

[markedwards]

Summary

According to #11128, @mui/system is expected to be explicitly installed. However, it seems to have never been added to the installation instructions.

Is it expected to be installed? If not, why the missing peer dependency warning?

Examples

yarn install v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "workspace-aggregator-9da3a97e-f777-46ee-947f-e0a57a0e83c9 > platform > @mui/[email protected]" has unmet peer dependency "@mui/system@^5.15.14 || ^6.0.0".

Motivation

No response

Search keywords: @mui/system

[LukasTy]

Hello, could you clarify the use case you are referring to? 🤔 @mui/system is explicitly installed by @mui/material: https://github.com/mui/material-ui/blob/be78d8700d0f2ce3cc5b403714756bc025402389/packages/mui-material/package.json#L45

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷. A live example would be perfect. This guide should be a good starting point. Thank you!

[markedwards]

I can create a minimal repro, but it's simply adding the dependencies and seeing the above warning. Is what #11128 says about moving to explicitly installing @mui/system no longer valid?

[LukasTy]

Is what #11128 says about moving to explicitly installing @mui/system no longer valid?

It is no longer valid because there was a recent addition to the @mui/system, which forces it to be a singleton. 😉

[markedwards]

So if I go to Stackblitz to make a minimal repro, and just update the package.json to look like this:

{
  "name": "parigqolwr.github",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@mui/icons-material": "^6.0.2",
    "@mui/material": "^6.0.0",
    "@mui/x-date-pickers": "^7.11.1",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "@types/react": "18.3.11",
    "@types/react-dom": "18.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}

It complains about the missing @mui/system dependency:

[markedwards]

Is there something I can do to follow this up? The above is the best repro I can offer. You see the issue when trying to even set up a repro on Stackblitz.

[LukasTy]

@markedwards Stackblitz doesn't support optional peer dependencies. 🙈

In regards to your peer dependency message, it seems setup dependent. Using pnpm such warning is not shown as it correctly resolves that the peer dependency requirement is met by the transitive dependency from @mui/material, whereas yarn classic fails to do it. 🙈 We could add a note in the installation documentation that in case @mui/system unmet peer dependency issue is shown, such dependency can be added to the list of direct dependencies to resolve this warning.

Does it answer your question? 🤔

[markedwards]

Perhaps a dumb question, but would it make sense to just have @mui/x-... depend on @mui/system? What does the peer relationship achieve?

In any case, yes my question is definitely answered, thanks.

[LukasTy]

Perhaps a dumb question, but would it make sense to just have @mui/x-... depend on @mui/system? What does the peer relationship achieve?

No questions are dumb. 🙈 Peer dependency helps us avoid the case of multiple @mui/system dependencies being installed (i.e., when Pickers are v7 and @mui/material is v6) and potentially causing issues with usages, which depend on React context or anything else that depends on a singleton. 😉

[markedwards]

Yeah, I figured that was the reasoning, but I wanted to confirm.

I think I will just remove the @mui/system dependency and tolerate the warning, but its good to know these details.

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[!NOTE] @markedwards How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.