v5.14.1 component props show only one default tag - TypeError #38034

pawelmidur · 2023-07-19T11:35:27Z

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Steps to reproduce 🕹

Link to live example:
<Typography component="div" />

Steps:

For example props component for <Typography> show only "span" can not set "div"

Current behavior 😯

No overload matches this call.
Overload 1 of 2, '(props: { component: "div"; } & TypographyOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "ref"> & { ...; }, "border" | ... 100 more ... | "variantMapping"> & { ...; }): Element | null', gave the following error.
Type '{ component: "div"; sx: { display: "block" | "-webkit-box"; textOverflow: "initial" | "ellipsis"; overflow: "hidden"; lineClamp: string; WebkitLineClamp: (string & {}) | SystemCssProperties | ... 13 more ... | undefined; WebkitBoxOrient: "initial" | "vertical"; } | ... 5 more ... | { ...; }; ... 364 more ...;...' is not assignable to type 'Omit<Omit<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | ... 2 more ... | undefined; }, "border" | ... 100 more ... | "variantMapping">'.
Types of property 'ref' are incompatible.
Type '((instance: HTMLSpanElement | null) => void) | RefObject | null | undefined' is not assignable to type '((instance: HTMLDivElement | null) => void) | RefObject | null | undefined'.
Type 'RefObject' is not assignable to type '((instance: HTMLDivElement | null) => void) | RefObject | null | undefined'.
Type 'RefObject' is not assignable to type 'RefObject'.
Property 'align' is missing in type 'HTMLSpanElement' but required in type 'HTMLDivElement'.
Overload 2 of 2, '(props: DefaultComponentProps<TypographyTypeMap<{}, "span">>): Element | null', gave the following error.
Type '{ component: string; sx: { display: "block" | "-webkit-box"; textOverflow: "initial" | "ellipsis"; overflow: "hidden"; lineClamp: string; WebkitLineClamp: (string & {}) | SystemCssProperties | ... 13 more ... | undefined; WebkitBoxOrient: "initial" | "vertical"; } | ... 5 more ... | { ...; }; ... 364 more ......' is not assignable to type 'IntrinsicAttributes & TypographyOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes, HTMLSpanElement>, "ref"> & { ...; }, "border" | ... 100 more ... | "variantMapping">'.
Property 'component' does not exist on type 'IntrinsicAttributes & TypographyOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes, HTMLSpanElement>, "ref"> & { ...; }, "border" | ... 100 more ... | "variantMapping">'.ts(2769)
lib.dom.d.ts(6524, 5): 'align' is declared here.

Expected behavior 🤔

Expected: <Typography component="div" /> will be not show type error

Context 🔦

No response

Your environment 🌎

System:
OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
Binaries:
Node: 18.16.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.5.1 - /usr/local/bin/npm
Browsers:
Chrome: Not Found
npmPackages:
@emotion/react: 11.11.1 => 11.11.1
@emotion/styled: 11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.8
@mui/core-downloads-tracker: 5.14.1
@mui/icons-material: 5.14.1 => 5.14.1
@mui/lab: 5.0.0-alpha.137 => 5.0.0-alpha.137
@mui/material: 5.14.1 => 5.14.1
@mui/private-theming: 5.13.7
@mui/styled-engine: 5.13.2
@mui/system: 5.14.1 => 5.14.1
@mui/types: 7.2.4
@mui/utils: 5.14.1
@mui/x-date-pickers: 6.10.0 => 6.10.0
@types/react: ^18.2.15 => 18.2.15
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: 5.1.6 => 5.1.6

The text was updated successfully, but these errors were encountered:

bourquep · 2023-07-19T12:33:25Z

I'm having the same issue with <Link component="button">

ZeeshanTamboli · 2023-07-19T13:02:11Z

I couldn't reproduce it in the latest version 5.14.1 on the CodeSandbox: https://codesandbox.io/s/runtime-surf-nsfhmn?file=/src/App.tsx. If you have a different TS config, could you share a CodeSandbox or a minimal repo that reproduces the issue?

The component type issues were addressed and fixed in the pull request #35924, which is included in the latest release 5.14.1.

cc @sai6855

mbDayo · 2023-07-19T15:16:18Z

Yep running into this also on 15.14.1

sai6855 · 2023-07-19T15:19:12Z

@mbDayo @bourquep can you share your tsconfig or codesandbox where it reproduces the issue.

brijeshb42 · 2023-07-19T15:38:39Z

@sai6855 Should this change have solved this issue as well - #37551?

sai6855 · 2023-07-19T15:42:46Z

@sai6855 Should this change have solved this issue as well - #37551?

I checked if it's solving or not but apparently it didn't solved. Need to dig deeper on why that's the case

mj12albert · 2023-07-19T15:44:05Z

Could it be related to the TS version? OP reported typescript: 5.1.6 => 5.1.6

Is everyone else experiencing this issue using TypeScript v5.x ? @mbDayo @bourquep

The sandbox is locked to 4.9.x

bourquep · 2023-07-19T15:58:07Z

Indeed, I'm on "typescript": "5.1.6"

bourquep · 2023-07-19T15:59:00Z

And here's my tsconfig.json:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["vite/client", "vite-plugin-svgr/client", "google.accounts"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"],
      "translate": ["./src/services/i18n"],
      "strings": ["./src/resources/strings/LocalizedStrings"]
    }
  },
  "include": ["src"]
}

dahyorr · 2023-07-19T16:06:30Z

Here's my config

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "baseUrl": ".",
        "downlevelIteration": true,
        "typeRoots": ["./typings"]
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}

dahyorr · 2023-07-19T16:12:57Z

using [email protected]
Don't think it's unique to 5.x

dahyorr · 2023-07-19T16:37:03Z

@mbDayo @bourquep can you share your tsconfig or codesandbox where it reproduces the issue.

This sandbox reproduces the issue https://codesandbox.io/p/sandbox/adoring-wave-xsmtx6

mj12albert · 2023-07-19T16:51:33Z

This sandbox reproduces the issue https://codesandbox.io/p/sandbox/adoring-wave-xsmtx6

@dahyorr Your sandbox is also using TS 5.x it seems (according to the package.json) 😅

If you are getting it with 4.7.4, are you able to reproduce it using our issue template?

dahyorr · 2023-07-19T20:53:16Z

This sandbox reproduces the issue https://codesandbox.io/p/sandbox/adoring-wave-xsmtx6

@dahyorr Your sandbox is also using TS 5.x it seems (according to the package.json) 😅

If you are getting it with 4.7.4, are you able to reproduce it using our issue template?

Ohh my bad
https://codesandbox.io/s/adoring-bassi-n8x6kk

remarkablemark · 2023-07-20T04:24:10Z

I am also getting this error in:

mj12albert · 2023-07-20T04:31:42Z

Ohh my bad https://codesandbox.io/s/adoring-bassi-n8x6kk

I forked this sandbox: https://codesandbox.io/s/runtime-surf-nsfhmn-forked-pf2j4h?file=/src/App.tsx

This is more or less what OP originally reported and it doesn't repro here:

<Typography component="p">a Text</Typography>
<Link component="button">A link</Link>

As for the other error caused by this other component:

<Stack component={Stage} spacing={2}>

It works if Stage isn't manually typed 😬 @dahyorr

sai6855 · 2023-07-20T04:43:08Z

@dahyorr here is the working sandbox which is fork of yours. so basically i've omitted component type from BoxProps to make it working

-  const Stage: React.FC<React.PropsWithChildren<BoxProps>> = ({
+ const Stage: React.FC<Omit<React.PropsWithChildren<BoxProps>, "component">> = ({

https://codesandbox.io/s/mutable-currying-dmwjlj?file=/src/App.tsx

Type error could be because of conflicting component types from React.PropsWithChildren and Stack component type

sai6855 · 2023-07-20T04:51:19Z

@remarkablemark can you share codesandbox repros, i can suggest you the workaround

pawelmidur · 2023-07-20T06:26:59Z

I checked exactly in which case this occurs and this is when extends TypographyProps like:

https://codesandbox.io/p/sandbox/heuristic-waterfall-m44zhm?file=%2Fpages%2Findex.tsx%3A5%2C7

sai6855 · 2023-07-20T06:54:39Z

@pawelmidur here is the working sandbox of your fork

https://codesandbox.io/p/sandbox/headless-fire-nzfrh5?file=%2Fpages%2Findex.tsx%3A20%2C8

- interface ITypographyMaxLineProps extends TypographyProps {
- maxLines?: number;
- }

- const TypographyMaxLine = ({
- maxLines,
- ...props
- }: ITypographyMaxLineProps): JSX.Element => {



+ type ITypographyMaxLineProps<C extends React.ElementType> =
+ TypographyProps<C> & {
+    maxLines?: number;
 + };

+ function TypographyMaxLine<C extends React.ElementType>({
+ maxLines,
+ ...props
+ }: ITypographyMaxLineProps<C>): JSX.Element {

sai6855 · 2023-07-20T07:18:55Z

I checked exactly in which case this occurs and this is when extends TypographyProps like:

https://codesandbox.io/p/sandbox/heuristic-waterfall-m44zhm?file=%2Fpages%2Findex.tsx%3A5%2C7

BTW the same code provided in sandbox also throwing type errors for versions less than 5.14.1.

here is the sandbox with same code but uses mui/material 5.14.0 and you can see type errors here also

https://codesandbox.io/s/condescending-snow-c339s9?file=/Demo.tsx

bourquep · 2023-07-20T12:04:59Z

In my case, the error was caused by the href in my Link declaration:

            <Link
              // href="#"
              component="button"
              sx={{
                color: 'inherit',
                textDecorationColor: 'inherit',
                font: 'inherit',
                verticalAlign: 'baseline'
              }}
              onClick={login}
            >
              {strings.mainSignInButtonTitle}
            </Link>

Removing the href fixes the issue.

paztis · 2023-07-20T12:10:09Z

the problem came form here I think

export interface OverridableComponent<M extends OverridableTypeMap> {
  // If you make any changes to this interface, please make sure to update the
  // `OverridableComponent` type in `mui-types/index.d.ts` as well.
  // Also, there are types in Base UI that have a similar shape to this interface
  // (e.g. SelectType, OptionType, etc.).
  <C extends React.ElementType>(
    props: {
      /**
       * The component used for the root node.
       * Either a string to use a HTML element or a component.
       */
      component: C;
    } & OverrideProps<M, C>,
  ): JSX.Element | null;
  (props: DefaultComponentProps<M>): JSX.Element | null;
}

as C is not specified it takes the default value define in the Component

for a link it is "a" for example

So now it restrict the 'component' property to its default value

paztis · 2023-07-20T12:13:55Z

this commit seems to be responsible
1b9c8ab

MartinXPN · 2023-07-21T07:27:26Z

I have the same issue with both Button and MenuItem when I try to specify component={Link} there:

<MenuItem key="pricing" component={Link} href="/pricing"...
<Button variant="outlined" href="/" component={Link} sx={{margin: "auto"}}>...

I'm using:

    "@emotion/cache": "^11.11.0",
    "@emotion/css": "^11.11.0",
    "@emotion/react": "^11.11.0",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.1",
    "@mui/lab": "^5.0.0-alpha.137",
    "@mui/material": "^5.14.1",
    "@mui/x-date-pickers": "^6.10.1",
    "next": "^13.4.11",
    "typescript": "^5.1.6",

remarkablemark · 2023-07-26T01:27:35Z

I want to say that the errors are no longer appearing for me in v5.14.2

ZeeshanTamboli · 2023-08-20T04:21:58Z

Closing this issue. It works from v5.14.3.

pawelmidur added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jul 19, 2023

zannager added the component: Typography The React component. label Jul 19, 2023

zannager assigned siriwatknp Jul 19, 2023

ZeeshanTamboli unassigned siriwatknp Jul 19, 2023

ZeeshanTamboli added status: waiting for author Issue with insufficient information typescript and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jul 19, 2023

sai6855 self-assigned this Jul 19, 2023

This was referenced Jul 20, 2023

build(deps): bump @mui/material from 5.14.0 to 5.14.1 encrypit/encrypit#116

Closed

build(deps): bump @mui/material from 5.14.0 to 5.14.1 lilboards/lilboards#1304

Closed

sai6855 removed the status: waiting for author Issue with insufficient information label Jul 20, 2023

sai6855 mentioned this issue Jul 20, 2023

[Core] Fix type errors caused by adding component type #38071

Closed

1 task

ZeeshanTamboli mentioned this issue Jul 21, 2023

Pull Request, which adds component prop to OverrideProps type, breaks MUI behavior #38079

Closed

2 tasks

sai6855 added a commit to michaldudak/material-ui that referenced this issue Jul 24, 2023

test for mui#38034 (comment)

5f09683

sai6855 added a commit to michaldudak/material-ui that referenced this issue Jul 24, 2023

test for mui#38034 (comment)

8bf7213

michaldudak mentioned this issue Jul 25, 2023

Revert "[core] Adds component prop to OverrideProps type (#35924)" #38150

Merged

michaldudak pushed a commit to michaldudak/material-ui that referenced this issue Jul 25, 2023

test for mui#38034 (comment)

0659a10

michaldudak pushed a commit to michaldudak/material-ui that referenced this issue Jul 25, 2023

test for mui#38034 (comment)

0278a2e

remarkablemark mentioned this issue Aug 2, 2023

build(deps): bump @mui/material from 5.14.2 to 5.14.3 encrypit/encrypit#143

Closed

ZeeshanTamboli closed this as completed Aug 20, 2023

Uh oh!

v5.14.1 component props show only one default tag - TypeError #38034

v5.14.1 component props show only one default tag - TypeError #38034

Comments

pawelmidur commented Jul 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Duplicates

Latest version

Steps to reproduce 🕹

Current behavior 😯

Expected behavior 🤔

Context 🔦

Your environment 🌎

bourquep commented Jul 19, 2023

Uh oh!

ZeeshanTamboli commented Jul 19, 2023

Uh oh!

mbDayo commented Jul 19, 2023

Uh oh!

sai6855 commented Jul 19, 2023

Uh oh!

brijeshb42 commented Jul 19, 2023

Uh oh!

sai6855 commented Jul 19, 2023

Uh oh!

mj12albert commented Jul 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bourquep commented Jul 19, 2023

Uh oh!

bourquep commented Jul 19, 2023

Uh oh!

dahyorr commented Jul 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dahyorr commented Jul 19, 2023

Uh oh!

dahyorr commented Jul 19, 2023 • edited by mj12albert Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mj12albert commented Jul 19, 2023

Uh oh!

dahyorr commented Jul 19, 2023 • edited by mj12albert Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

remarkablemark commented Jul 20, 2023

Uh oh!

mj12albert commented Jul 20, 2023

Uh oh!

sai6855 commented Jul 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sai6855 commented Jul 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pawelmidur commented Jul 20, 2023

Uh oh!

sai6855 commented Jul 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sai6855 commented Jul 20, 2023

Uh oh!

bourquep commented Jul 20, 2023

Uh oh!

paztis commented Jul 20, 2023

Uh oh!

paztis commented Jul 20, 2023

Uh oh!

MartinXPN commented Jul 21, 2023

Uh oh!

remarkablemark commented Jul 26, 2023

Uh oh!

ZeeshanTamboli commented Aug 20, 2023

Uh oh!

pawelmidur commented Jul 19, 2023 •

edited

Loading

mj12albert commented Jul 19, 2023 •

edited

Loading

dahyorr commented Jul 19, 2023 •

edited

Loading

dahyorr commented Jul 19, 2023 •

edited by mj12albert

Loading

dahyorr commented Jul 19, 2023 •

edited by mj12albert

Loading

sai6855 commented Jul 20, 2023 •

edited

Loading

sai6855 commented Jul 20, 2023 •

edited

Loading

sai6855 commented Jul 20, 2023 •

edited

Loading