mui / mui/material-ui

[Button] Button href TypeScript error

Open
#39,287 9 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

scope: button type: expected behavior typescript
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

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 : https://github.com/mui/material-ui/issues/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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the TypeScript error with the Button component using href, target="_blank", and the listed package versions. Inspect the Button type definitions and related entry points to identify why the anchor overload rejects an optional string; done means this usage type-checks without weakening strict null checks.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.