@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/[email protected]`` is installs ``@types/[email protected], which in turn installs @types/[email protected]. this is possibly causing conflicts with the root installation of @types/[email protected]

$ npm ls @types/react

[email protected] /home/username/proyect
├─┬ @mui/[email protected]
│ └── @types/[email protected] deduped
├─┬ @mui/[email protected]
│ ├─┬ @mui/[email protected]
│ │ └── @types/[email protected] deduped
│ ├─┬ @mui/[email protected]
│ │ ├─┬ @mui/[email protected]
│ │ │ └── @types/[email protected] deduped
│ │ └── @types/[email protected] deduped
│ ├─┬ @mui/[email protected]
│ │ └── @types/[email protected] deduped
│ ├─┬ @mui/[email protected]
│ │ └─┬ @types/[email protected] 
│ │   └── @types/[email protected] <====================== this may probably be the problem
│ ├─┬ @types/[email protected]
│ │ └── @types/[email protected] deduped
│ └── @types/[email protected] deduped
├─┬ @types/[email protected]
│ └── @types/[email protected] deduped
├─┬ @types/[email protected]
│ └── @types/[email protected] deduped
├── @types/[email protected]
└─┬ [email protected]
  └─┬ [email protected]
    └── @types/[email protected] 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/[email protected]
    ├─┬ @mui/[email protected]
    │ └── [email protected] deduped
    ├─┬ @mui/[email protected]
    │ └── [email protected] deduped
    ├─┬ [email protected]
    │ └── [email protected]
    └── [email protected]

[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