[material-ui][Link] Wrong TS infer of component props after minor version upgrade

[ltsochev-dev]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

The following code

import { Link } from '@mui/material'

const LinkButton = ({ onClick, children }: { children?: ReactNode; onClick: () => void }) => {
    return <Link component="button" variant="body1" onClick={onClick} type="button">{children}</Link>
}

export default LinkButton

Throws a compilation error. It has been working flawlessly for over an year. I see no reason to update it. Is this a bug or a major change in MUI. Which would be weird because I only bumped the patch version, not even the minor one and this is a breaking change.

Current behavior 😯

Property onClick does not exist on type

Expected behavior 🤔

It should compile properly. It used to compile properly.

Context 🔦

I have not so legacy application that used to run MUI "5.14.2". Recently upgraded to "5.14.14" and It's throwing TSC compilation errors on code that used to work. And I'm wondering whether I should go and change my code or is this some sort of a bug

Your environment 🌎

System: OS: Linux 6.5 Fedora Linux 38 (Workstation Edition) Binaries: Node: 18.18.0 - /usr/bin/node Yarn: 1.22.19 - /usr/bin/yarn npm: 9.5.0 - /usr/local/bin/npm Browsers: Chrome: Not Found npmPackages: @emotion/react: 11.11.1 @emotion/styled: 11.11.0 @mui/base: 5.0.0-beta.20 @mui/core-downloads-tracker: 5.14.14 @mui/icons-material: 5.14.14 @mui/material: 5.14.14 @mui/private-theming: 5.14.14 @mui/styled-engine: 5.14.14 @mui/system: 5.14.14 @mui/types: 7.2.6 @mui/utils: 5.14.14 @types/react: 18.2.30 react: 18.2.0 react-dom: 18.2.0 typescript: 5.2.2

[Harshsharmaa28]

@ltsochev-dev assing me this issue

[ZeeshanTamboli]

I am not able to reproduce your issue - https://codesandbox.io/s/dry-resonance-fr4ljc?file=/src/App.tsx in the latest version. Can you provide a reproduction?

[ltsochev-dev]

Okay I can't reproduce it in codesandbox but even at the most minimalistic usage in my project I get the typescript compilation error. The component works while in DEV mode, renders as you'd expect but typescript is unhappy. So I assume my team have somehow overriden something but I can't for the life of me begin to fiture out where the issue could be happening at. I've been googling for awhile and there are other people with similar issues. In this codesandbox - https://codesandbox.io/s/cranky-taussig-kdsc23?file=/src/App.tsx - I've basically locked every version that my project has, including the theme overrides but it still doesn't come crashing down. Meanwhile in my project, the most minimal usage like so

import Box from '@mui/material/Box'
import Link from '@mui/material/Link'

const TmpPage: NextPage = () => {
  const goToRegister = () => {
    console.log('Weird flex')
  }

  return (
    <Box>
      <h1>Hello World </h1>
      <Link
        component="button"
        variant="body1"
        onClick={goToRegister}
        type="button"
      >
        Weird button
      </Link>
    </Box>
  )
}

export default TmpPage

Brings this 5 page error message

No overload matches this call.
  Overload 1 of 2, '(props: { component: string; } & LinkOwnProps & CommonProps & Omit<{}, "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | ... 109 more ... | "underline">): Element', gave the following error.
    Type '{ children: string; component: string; variant: "body1"; onClick: () => void; type: string; }' is not assignable to type 'IntrinsicAttributes & { component: string; } & LinkOwnProps & CommonProps & Omit<{}, "border" | "borderTop" | "borderRight" | ... 112 more ... | "underline">'.
      Property 'onClick' does not exist on type 'IntrinsicAttributes & { component: string; } & LinkOwnProps & CommonProps & Omit<{}, "border" | "borderTop" | "borderRight" | ... 112 more ... | "underline">'.
  Overload 2 of 2, '(props: DefaultComponentProps<LinkTypeMap<{}, "a">>): Element', gave the following error.
    Type '{ children: string; component: string; variant: "body1"; onClick: () => void; type: string; }' is not assignable to type 'IntrinsicAttributes & LinkOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & { ...; }, "border" | ... 114 more ... | "underline">'.
      Property 'component' does not exist on type 'IntrinsicAttributes & LinkOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & { ...; }, "border" | ... 114 more ... | "underline">'.ts(2769)

How can I even begin to troubleshoot this?

I feel like codesandbox isn't respecting the typescript version I've locked in package.json. I'll try making a new project in few hours.

P.S: I've removed all traces of "node_modules" and reinstalled using npm ci but in the bigger app I get the tsc error while in a fresh new project it does work. So I suppose MUI is fine but I don't know where our codebase is doing typescript magic to mess up MUI in such a way.

P.P.S: I've removed package-lock.json along with node_modules and ran npm i instead of ci but the problem persists

[ZeeshanTamboli]

@ltsochev-dev Maybe check your ts config.

[ltsochev-dev]

This is clearly not tsconfig issue as I've provided an exact replica of my tsconfig.json in the codesandbox. Something is causing MUI types to break in my project.

[shughes-uk]

Experiencing this after upgrading to react 18. It only seems to happen with the react router Link component. Using MUI components or simple html components does not cause an issue.

Could this be because the react router ref is a ForwardRefExoticComponent?

[shughes-uk]

Cause by an issue with @types/react having two versions installed by yarn. Some details on resolution here

reactjs/react-transition-group#813