@mui/utils dependencies possibly install an outdated version of @types/react, causing errors when running tsc

[Leningrade]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Update react. react-dom, and typescript to their latestest versions
2. Updated mui packages to their latest versions
3. execute npm typeckeck which runs tsc --no-emit

This should result in an error report ending in:

Errors  Files
     1  node_modules/@types/node/globals.d.ts:28
   176  node_modules/@types/react-is/node_modules/@types/react/index.d.ts:3077
     4  node_modules/@types/react/ts5.0/index.d.ts:3097
     1  node_modules/typescript/lib/lib.dom.d.ts:17521

Example errors include:

node_modules/@types/react-is/node_modules/@types/react/index.d.ts:3264:13 - error TS2717: Subsequent property declarations must have the same type.  Property 'use' must be of type 'SVGProps<SVGUseElement>', but here has type 'SVGProps<SVGUseElement>'.

3264             use: React.SVGProps<SVGUseElement>;
                 ~~~

  node_modules/@types/react/ts5.0/index.d.ts:3293:13
    3293             use: React.SVGProps<SVGUseElement>;
                     ~~~
    'use' was also declared here.

Current behavior 😯

The TSC process ends with multiple errors (displayed above), all in the type definition files for react. Some of those where installed as dependencies for @mui/material.

Expected behavior 🤔

runing npm typecheck or similar should not throw any erros

Context 🔦

After updating my projects typescript version, attempting to run a typecheck results in multiple errors on the @types/react-is and @types/react modules.

My current hypothesis is that this is a problem caused by the dependencies for @mui/material: @mui/utils@5.12.0`` is installs ``@types/react-is@17.0.4, which in turn installs @types/react@17.0.58. this is possibly causing conflicts with the root installation of @types/react@18.2.0

$ npm ls @types/react

react-backoffice@0.0.0 /home/username/proyect
├─┬ @mui/icons-material@5.11.16
│ └── @types/react@18.2.0 deduped
├─┬ @mui/material@5.12.2
│ ├─┬ @mui/base@5.0.0-alpha.127
│ │ └── @types/react@18.2.0 deduped
│ ├─┬ @mui/system@5.12.1
│ │ ├─┬ @mui/private-theming@5.12.0
│ │ │ └── @types/react@18.2.0 deduped
│ │ └── @types/react@18.2.0 deduped
│ ├─┬ @mui/types@7.2.4
│ │ └── @types/react@18.2.0 deduped
│ ├─┬ @mui/utils@5.12.0
│ │ └─┬ @types/react-is@17.0.4 
│ │   └── @types/react@17.0.58 <====================== this may probably be the problem
│ ├─┬ @types/react-transition-group@4.4.5
│ │ └── @types/react@18.2.0 deduped
│ └── @types/react@18.2.0 deduped
├─┬ @types/react-dom@18.2.1
│ └── @types/react@18.2.0 deduped
├─┬ @types/react-helmet@6.1.6
│ └── @types/react@18.2.0 deduped
├── @types/react@18.2.0
└─┬ react-big-calendar@1.6.9
  └─┬ uncontrollable@7.2.1
    └── @types/react@18.2.0 deduped

Your environment 🌎

npx @mui/envinfo

``` System: OS: Linux 6.2 Nobara Linux 37 (Thirty Seven) Binaries: Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node Yarn: Not Found npm: 9.6.5 - ~/Documents/project/node_modules/.bin/npm Browsers: Firefox: 112.0 npmPackages: @emotion/react: ^11.10.6 => 11.10.6 @emotion/styled: ^11.10.6 => 11.10.6 @mui/base: 5.0.0-alpha.127 @mui/core-downloads-tracker: 5.12.2 @mui/icons-material: ^5.8.4 => 5.11.16 @mui/material: ^5.12.2 => 5.12.2 @mui/private-theming: 5.12.0 @mui/styled-engine: 5.12.0 @mui/system: 5.12.1 @mui/types: 7.2.4 @mui/utils: 5.12.0 @mui/x-date-pickers: ^6.2.1 => 6.2.1 @types/react: ^18.2.0 => 18.2.0 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.0.4 => 5.0.4 ```

Ts & Vite config

Tsconfig ``` { "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "lib": ["DOM", "DOM.Iterable", "ESNext"], "allowJs": true, "skipLibCheck": false, "esModuleInterop": false, "allowSyntheticDefaultImports": true, "strict": false, "forceConsistentCasingInFileNames": true, "module": "ESNext", "moduleResolution": "Node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": ["./src", "vite.config.ts"] } ``` vite.config.js ``` import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import eslintPlugin from 'vite-plugin-eslint'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ eslintPlugin({ cache: false}), react()], }) ```

[VladimirKalmykov]

Same issue. I have installed "@types/react": "^18.0.28" and "@mui/material": "^5.12.2" and got the same error.

[hmd-ai]

Same issue: it seems that prop-types package is using an old version of react-is:

  └─┬ @mui/material@5.12.2
    ├─┬ @mui/base@5.0.0-alpha.127
    │ └── react-is@18.2.0 deduped
    ├─┬ @mui/utils@5.12.0
    │ └── react-is@18.2.0 deduped
    ├─┬ prop-types@15.8.1
    │ └── react-is@16.13.1
    └── react-is@18.2.0

[cmdcolin]

saw something maybe sort of related, with https://github.com/mui/material-ui/blob/master/packages/mui-utils/package.json installing @types/react-is? it is getting v17 when i'm trying to use v18 (i am getting a bunch of errors, and using skipLibCheck makes em go away, but was interested in trying to not skipLibCheck)

[marmelo]

While this issue is not merged, we can force the dependency resolution in our package.json. This works with Yarn, I believe NPM uses overrides instead of resolutions.

{
  ...
  "dependencies": {
    ...
  }
  "resolutions": {
    "@types/react-is": "18.2.0"
  }
}

[ZeeshanTamboli]

Fixed in https://github.com/mui/material-ui/pull/37098