Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
benjdlambert opened this issue Jan 4, 2024 · 29 comments · Fixed by #41500 or mui/mui-x#12479
Assignees
Labels
component: Popper The React component. See <Popup> for the latest version. package: material-ui Specific to @mui/material typescript

Comments

@benjdlambert
Copy link

benjdlambert commented Jan 4, 2024

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

@benjdlambert benjdlambert added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 4, 2024
@garyjohnson
Copy link

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
Copy link
Contributor

Same here

heath-freenome added a commit to heath-freenome/react-jsonschema-form that referenced this issue Jan 7, 2024
- Temporarily locked down "@mui/material": "5.15.2" and "@mui/base": "5.0.0-beta.28" due to mui/material-ui#40427
@hfanzaou
Copy link

hfanzaou commented Jan 7, 2024

i have the same problem

@jonystn
Copy link

jonystn commented Jan 8, 2024

Same problem here.

heath-freenome added a commit to rjsf-team/react-jsonschema-form that referenced this issue Jan 8, 2024
* Fix: Bumped packages using `npm run bump-all-packages`

- Temporarily locked down "@mui/material": "5.15.2" and "@mui/base": "5.0.0-beta.28" due to mui/material-ui#40427

* - Responded to reviewer feedback by removing an added dev-dependency that seems unnecessary
@medchedli
Copy link

medchedli commented Jan 10, 2024

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
Copy link

jonystn commented Jan 10, 2024 via email

@raphaelbp12
Copy link

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

@jonystn
Copy link

jonystn commented Jan 11, 2024

@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
Copy link
Member

mj12albert commented Jan 15, 2024

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?

jamieklassen pushed a commit to jamieklassen/backstage that referenced this issue Jan 15, 2024
This seems to work around mui/material-ui#40427; `yarn tsc:full` no longer fails
in a freshly-scaffolded test app.

Signed-off-by: Jamie Klassen <[email protected]>
@marcossilvestrini
Copy link

marcossilvestrini commented Jan 22, 2024

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
Copy link

Also with the same issue!

@AnX1001
Copy link

AnX1001 commented Jan 24, 2024

Likewise.

@antoniocanelas
Copy link

Hi, some information regarding this topic?

@mcintoac-aws
Copy link

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
Copy link

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

@raphaelbp12
Copy link

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
Copy link

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

@midhilkari
Copy link

midhilkari commented Mar 14, 2024

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

@mj12albert

This comment was marked as outdated.

@midhilkari
Copy link

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

@siriwatknp siriwatknp added external dependency Blocked by external dependency, we can’t do anything about it and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Mar 14, 2024
@siriwatknp
Copy link
Member

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
Copy link

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
Copy link
Member

siriwatknp commented Mar 14, 2024

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
Copy link

We are blocked on this for future updates.

@siriwatknp
Copy link
Member

@benjdlambert @antoniocanelas Can you try this fix?

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

@siriwatknp siriwatknp added component: Popper The React component. See <Popup> for the latest version. package: material-ui Specific to @mui/material and removed external dependency Blocked by external dependency, we can’t do anything about it labels Mar 15, 2024
@antoniocanelas
Copy link

This solution didn't fix. :(

@mnajdova
Copy link
Member

This solution didn't fix. :(

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

@antoniocanelas
Copy link

Error testing it
image

@cherniavskii
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: Popper The React component. See <Popup> for the latest version. package: material-ui Specific to @mui/material typescript
Projects
None yet