Typescript broken in latest release ElementType requires between 0-1 type arguments

[benjdlambert]

Steps to reproduce

yarn install && yarn tsc --skipLibCheck=false

Current behavior

node_modules/@mui/base/Unstable_Popup/Popup.d.ts:13:70 - error TS2707: Generic type 'ElementType' requires between 0 and 1 type arguments.

13 declare const Popup: React.ForwardRefExoticComponent<Omit<PopupProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<Element>>;
                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@mui/material/Popper/Popper.d.ts:46:17 - error TS2707: Generic type 'ElementType' requires between 0 and 1 type arguments.

46     component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@mui/material/Popper/Popper.d.ts:53:16 - error TS2707: Generic type 'ElementType' requires between 0 and 1 type arguments.

53         Root?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 3 errors in 2 files.

Errors  Files
     1  node_modules/@mui/base/Unstable_Popup/Popup.d.ts:13
     2  node_modules/@mui/material/Popper/Popper.d.ts:46

Expected behavior

No typescript errors

Context

looks like this error started from the release yesterday.

Your environment

npx @mui/envinfo

   System:
    OS: macOS 14.2.1
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
  Browsers:
    Chrome: 120.0.6099.129
    Edge: 120.0.2210.91
    Safari: 17.2.1
  npmPackages:
    @emotion/react:  11.11.3
    @emotion/styled:  11.11.0
    @mui/base:  5.0.0-beta.30
    @mui/core-downloads-tracker:  5.15.3
    @mui/material:  5.15.3
    @mui/private-theming:  5.15.3
    @mui/styled-engine:  5.15.3
    @mui/system:  5.15.3
    @mui/types:  7.2.12
    @mui/utils:  5.15.3
    @types/react:  17.0.74
    react:  17.0.2
    react-dom:  17.0.2
    typescript: ~5.2.0 => 5.2.2

Search keywords: Typescript tsc GenericType

[garyjohnson]

We're seeing the same issue, and have pinned to @mui/material: "5.15.2" and "@mui/base": "5.0.0-beta.28" as a workaround.

Order ID 72484

`npx @mui/envinfo`

``` System: OS: macOS 14.2.1 Binaries: Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node Yarn: 1.22.21 - ~/.nvm/versions/node/v18.15.0/bin/yarn npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm Browsers: Chrome: 120.0.6099.199 Edge: 120.0.2210.91 Safari: 17.2.1 npmPackages: @emotion/react: 11.11.1 @emotion/styled: 11.11.0 @mui/base: 5.0.0-beta.30 @mui/core-downloads-tracker: 5.15.3 @mui/lab: 5.0.0-alpha.159 @mui/material: 5.15.3 @mui/private-theming: 5.15.3 @mui/styled-engine: 5.15.3 @mui/system: 5.15.3 @mui/types: 7.2.12 @mui/utils: 5.15.3 @mui/x-charts: 6.18.3 @mui/x-data-grid: 6.18.6 @mui/x-data-grid-pro: 6.18.6 @mui/x-date-pickers: 6.18.6 @mui/x-date-pickers-pro: 6.18.6 @mui/x-license-pro: 6.10.2 @types/react: 18.2.42 => 18.2.42 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: 5.2.2 => 5.2.2 ```

[heath-freenome]

Same here

[hfanzaou]

i have the same problem

[jonystn]

Same problem here.

[medchedli]

I temporarily bypassed the error by changing <React.ElementType<any, keyof React.JSX.IntrinsicElements> with React.ElementType<any> in Popper and Popup declarations.

React.ElementType is being given two arguments: any and keyof React.JSX.IntrinsicElements. However, React.ElementType is designed to take only one argument or none at all.

In your MUI package, go to the following files :

• node_modules/@mui/material/Popper/Popper.d.ts

• node_modules/@mui/base/Unstable_Popup/Popup.d.ts

and update the declarations in both files

I think the root cause is related to this PR on @Types/react :
DefinitelyTyped/DefinitelyTyped#67430

[jonystn]

I fixex it updating the typescript.

…

On Wed, Jan 10, 2024, 18:29 Mohamed Chedli Ben Yaghlane < ***@***.***> wrote: I temporarily bypassed the error by changing <React.ElementType<any, keyof React.JSX.IntrinsicElements> with React.ElementType<any> in Popper and Popup declarations. React.ElementType is being given two arguments: any and keyof React.JSX.IntrinsicElements. However, React.ElementType is designed to take only one argument or none at all. In your MUI package, go to the following files : - ***@***.***/material/Popper/Popper.d.ts - ***@***.***/base/Unstable_Popup/Popup.d.ts and update the declarations in both files This may be related to this PR on @Types/react : DefinitelyTyped/DefinitelyTyped#67430 <DefinitelyTyped/DefinitelyTyped#67430> — Reply to this email directly, view it on GitHub <#40427 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKH6DEMKPD76KBPY2D67GCTYN3FWXAVCNFSM6AAAAABBMWXM2CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOBVGI4TIOBQHE> . You are receiving this because you commented.Message ID: ***@***.***>

[raphaelbp12]

@jonystn could you please specify from which version to which version did you update? thanks!

[jonystn]

@raphaelbp12
"typescript": "^5.3.3"
"@mui/base": "5.0.0-beta.30",
"@mui/lab": "^5.0.0-alpha.159",
"@mui/material": "^5.15.3",
"@mui/system": "^5.15.3",
"@mui/x-data-grid": "^6.18.6",
"@mui/x-date-pickers": "^6.18.6",
"date-fns": "^2.30.0",
"@date-io/date-fns": "^2.17.0",

[mj12albert]

As of the current version v5.15.4 the typescript version is already ^5.3.3: https://github.com/mui/material-ui/blob/v5.15.4/package.json#L182

However we also changed the package manager to pnpm... does pnpm tsc work for anyone?

[marcossilvestrini]

Same problem here. Workaround not working. I get this error after enabled techdoc mermaid addon. Version 1.21.1 and version 1.22.1

[antoniocanelas]

Also with the same issue!

[AnX1001]

Likewise.

[antoniocanelas]

Hi, some information regarding this topic?

[mcintoac-aws]

Any updates on this issue? Running yarn tsc in our projects pre-commit is causing pre-commit to consistently fail and no work-around has solved the problem for us.

[antoniocanelas]

Hi, not being able to find a solution. Is there any idea how to solve this?

[raphaelbp12]

I solved this issue by putting specific versions on our resolutions in package.json file.

"resolutions": {
    "@mui/material": "5.15.2",
    "@mui/base": "5.0.0-beta.28",
  },

[mcintoac-aws]

@raphaelbp12 This worked for me as a temporary fix. Hopefully mui will resolve the issue soon.

[midhilkari]

The workaround targeting older versions of @mui/material & @mui/base isn't working for me when using package @mui/x-data-grid: ^6.19.6 but works fine when not using data-grid package

[midhilkari]

Update: Downgrading @mui/x-data-grid to version 6.19.1" helped resolved the types issue

[siriwatknp]

This issue happens to start at https://www.npmjs.com/package/@types/react/v/18.2.44

- type ElementType<P = any> =
+ type ElementType<P = any, Tag extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements> =

I wonder why our build process replaces the use of declared PopperProps with its value.

See the implementation:

type PopperProps = Omit<BasePopperProps, 'direction'> & {
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component?: React.ElementType;
  /**
   * The components used for each slot inside the Popper.
   * Either a string to use a HTML element or a component.
   * @default {}
   */
  components?: {
    Root?: React.ElementType;
  };
  /**
   * The props used for each slot inside the Popper.
   * @default {}
   */
  componentsProps?: BasePopperProps['slotProps'];
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme>;
};

const Popper = React.forwardRef() as React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;

Here is the build result:

declare const Popper: React.ForwardRefExoticComponent<Omit<BasePopperProps, "direction"> &
// the object below should just be PopperProps
{
    /**
     * The component used for the root node.
     * Either a string to use a HTML element or a component.
     */
    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
    /**
     * The components used for each slot inside the Popper.
     * Either a string to use a HTML element or a component.
     * @default {}
     */
    components?: {
        Root?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
    } | undefined;
    /**
     * The props used for each slot inside the Popper.
     * @default {}
     */
    componentsProps?: BasePopperProps['slotProps'];
    /**
     * The system prop that allows defining system overrides as well as additional CSS styles.
     */
    sx?: SxProps<Theme> | undefined;
} & React.RefAttributes<HTMLDivElement>>;

[sam-glendenning]

This issue happens to start at https://www.npmjs.com/package/@types/react/v/18.2.44

I wouldn't pay too close attention to that. I've been experiencing this with @types/react 17.0.65

[siriwatknp]

This issue happens to start at https://www.npmjs.com/package/@types/react/v/18.2.44

I wouldn't pay too close attention to that. I've been experiencing this with @types/react 17.0.65

It's related. Because we built with the latest @types/react, the *.d.ts got the new React.ElementType<any, ...>. However, your project's @types/react does not receive 2 arguments that's why it causes an error. https://app.renovatebot.com/package-diff?name=@types%2freact&from=18.2.43&to=18.2.44

This will fix the issue including future proof if the build process does not use the generic. In meanwhile, how about reverting the #40146 back to @types/[email protected]?

cc @mui/code-infra

[antoniocanelas]

We are blocked on this for future updates.

[siriwatknp]

@benjdlambert @antoniocanelas Can you try this fix?

// package.json
  "@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/738da163/@mui/material",
  …

[antoniocanelas]

This solution didn't fix. :(

[mnajdova]

This solution didn't fix. :(

Did you tested the version shared in #40427 (comment)?

[antoniocanelas]

Error testing it

[cherniavskii]

I can confirm there's still an issue with Popper: