@mui/material incompatible with versions of @types/react > 18.2.60

[valleywood]

Steps to reproduce

https://codesandbox.io/p/sandbox/test-w2msfc?file=%2Fsrc%2FInput.tsx%3A9%2C1

Steps:

1. Check TS warning in Input.tsx

Type 'ForwardRefExoticComponent<Omit<InputProps, "ref"> & RefAttributes<unknown>>' is not assignable to type 'FC<InputProps>'.
  Types of property 'propTypes' are incompatible.
    Type 'WeakValidationMap<Omit<InputProps, "ref"> & RefAttributes<unknown>> | undefined' is not assignable to type 'WeakValidationMap<InputProps> | undefined'.
      Type 'WeakValidationMap<Omit<InputProps, "ref"> & RefAttributes<unknown>>' is not assignable to type 'WeakValidationMap<InputProps>'.
        Types of property 'ref' are incompatible.
          Type 'Validator<LegacyRef<unknown> | undefined> | undefined' is not assignable to type 'Validator<((instance: unknown) => void) | RefObject<unknown> | null | undefined> | undefined'.
            Type 'Validator<LegacyRef<unknown> | undefined>' is not assignable to type 'Validator<((instance: unknown) => void) | RefObject<unknown> | null | undefined>'.
              Type 'LegacyRef<unknown> | undefined' is not assignable to type '((instance: unknown) => void) | RefObject<unknown> | null | undefined'.typescript(2322)

Current behavior

Possible but verbose solution without TS error (but is it even legit)?

export const Input2: React.ForwardRefExoticComponent<
  Omit<InputProps, 'ref'> & React.RefAttributes<HTMLDivElement>
> = React.forwardRef<HTMLDivElement, InputProps>((props, ref) => {
  return <MuiInput {...props} ref={ref} />;
});

Expected behavior

According to documentation: https://mui.com/material-ui/guides/composition/#caveat-with-strictmode

It should be enough be enough to wrapt components like this:

export default React.forwardRef((props, ref) => <Component {...props} forwardedRef={ref} />);

Context

Wrapping @mui/material components

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.4.1
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    npm: 10.1.0 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 123.0.6312.123
    Edge: Not Found
    Safari: 17.4.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: 11.11.0 => 11.11.0 
    @mui/base: ^5.0.0-beta.24 => 5.0.0-beta.42 
    @mui/core-downloads-tracker:  5.15.15 
    @mui/icons-material: ^5.15.13 => 5.15.15 
    @mui/lab: ^5.0.0-alpha.153 => 5.0.0-alpha.170 
    @mui/material: ^5.15.13 => 5.15.15 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system: 5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @types/react: 18.2.62 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.4.2 => 5.4.4 

Search keywords: types @types/react forwardRef

[valleywood]

@mj12albert @zannager Any updates on this?

[mj12albert]

@valleywood Could you try using the package versions in this sandbox?

[valleywood]

@mj12albert But the sandbox you linked to above also contains the error? 🤔

[ithrforu]

Problem is still relevant with @types/react 18.3.3 and @mui/material 5.15.19.

[valleywood]

@mj12albert Any updates on this? This is still a problem with @types/react 18.3.3 and @mui/material 5.16.7.

[ithrforu]

Think #43276, #42824 will fix this issue.