[Button][material-ui] Button href TypeScript error

[kmoyse-apizee]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Hi, I found issue that really looks like mine : #22699
Steps:

1. Developing in typescript
2. Use <Button with href
3. add target="_blank" property to it
4. I get error ;
   TS2769: No overload matches this call.
   Overload 1 of 3, '(props: { href: string; } & ButtonOwnProps & Omit<ButtonBaseOwnProps, "classes"> & CommonProps & Omit<Omit<DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>, "ref"> & { ...; }, "color" | ... 24 more ... | "startIcon">): Element', gave the following error.
   Type 'string | undefined' is not assignable to type 'string'.
   Type 'undefined' is not assignable to type 'string'.

Trying to set strictNullChecks: true in tsconfig.json does not solve the problem

Current behavior 😯

typescript transpile error

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

System:
OS: Linux 5.19 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
Binaries:
Node: 16.18.0 - /usr/local/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 9.6.4 - /usr/local/bin/npm
Browsers:
Chrome: 117.0.5938.132
npmPackages:
@emotion/react: ^11.11.1 => 11.11.1
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.17
@mui/core-downloads-tracker: 5.14.11
@mui/icons-material: ^5.14.11 => 5.14.11
@mui/material: ^5.14.11 => 5.14.11
@mui/private-theming: 5.14.11
@mui/styled-engine: 5.14.11
@mui/system: 5.14.11
@mui/types: 7.2.4
@mui/utils: 5.14.11
@types/react: ^18.2.12 => 18.2.12
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^4.9.5 => 4.9.5

[aryan0078]

assign this task to me

[mj12albert]

@kmoyse-apizee I can't reproduce this: https://codesandbox.io/s/https-github-com-mui-material-ui-issues-39287-whkjn3

Could you provide a repro? You can fork my sandbox or this template: https://mui.com/r/issue-template-latest

[legendary0911]

can you assign it to me ?

[mj12albert]

@legendary0911 Are you able to reproduce the issue?

[kmoyse-apizee]

Hi,

Thanks for your answer and the reproduction.

I forked it to reproduce my problem : https://codesandbox.io/s/https-github-com-mui-material-ui-issues-39287-forked-hc4nwk
If I copy paste the Demo.tsx code into a component under my vs-code I reproduce the issue. It does not on codesandbox...

It seems to be more related to the 'href' property rather than the 'target' itself.

import React, { useState } from "react";
import Button from "@mui/material/Button";

export default function TextButtons() {
  const [href, setHref] = useState<string>();
  return (
    <Button href={href} target="_blank" rel="noopener">
      Link
    </Button>
  );
}

The error :
No overload matches this call.
Overload 1 of 3, '(props: { href: string; } & ButtonOwnProps & Omit<ButtonBaseOwnProps, "classes"> & CommonProps & Omit<Omit<DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>, "ref"> & { ...; }, "href" | ... 24 more ... | "variant">): Element', gave the following error.
Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.

Seems happens because my href constant coulld be undefined...

I don't know why the issue shows on vs-code and not on codesandbox ? my tsconfig has the same configuration...

[mj12albert]

@kmoyse-apizee The initial state in your snippet is undefined, you can fix it by initializing with an empty string:

-const [href, setHref] = useState<string>();
+const [href, setHref] = useState<string>('');

[kmoyse-apizee]

Yes but in my application logic the variable in the href can actually be undefined. To fix the problem I had to do :

<Button href={href ?? "#"} target="_blank" rel="noopener" disabled={!href}>Link</Button>

Which is fine because if not defined the button becomes disabled.

I still don't get why same code works on codesandbox and cannot be compiled by typescript in my environment.