[data grid] GridAutoSizer.d.ts Interface 'AutoSizerProps' incorrectly extends interface 'Omit<HTMLAttributes<HTMLDivElement>, "children">'

[meena-erian]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Run git clone https://github.com/meena-erian/react-typescript-library.git
2. Edit package.json in the cloned repository adding the following dependencies

    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.10.13",
    "@mui/x-data-grid": "^5.17.10",

4. Add import { DataGrid } from "@mui/x-data-grid"; anywhere in the source code of the cloned repository
5. Now run npm run build-lib

Current behavior 😯

Error Log:

> npx tsc

node_modules/@mui/x-data-grid/components/GridAutoSizer.d.ts:6:18 - error TS2430: Interface 'AutoSizerProps' incorrectly extends interface 'Omit<HTMLAttributes<HTMLDivElement>, "children">'.
  Types of property 'onResize' are incompatible.
    Type '(size: AutoSizerSize) => void' is not assignable to type 'ReactEventHandler<HTMLDivElement>'.
      Types of parameters 'size' and 'event' are incompatible.
        Type 'SyntheticEvent<HTMLDivElement, Event>' is missing the following properties from type 'AutoSizerSize': height, width

6 export interface AutoSizerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
                   ~~~~~~~~~~~~~~


Found 1 error in node_modules/@mui/x-data-grid/components/GridAutoSizer.d.ts:6

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build-lib: `npx tsc`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build-lib script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /PathToLogsFile/2022-11-10T14_26_17_493Z-debug.log

Expected behavior 🤔

Expected that the package will compile successfully as it did right before importing DataGrid

Context 🔦

I'm building a typescript + react library where part of it is using the DataGrid and it should eventually be published to npm.

I'm aware that the problem might be related to some of my typescript config that somehow makes it incompatible. In that case, I would appreciate it a lot if anyone can please guide me to fix it.

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Irrelevant details.

Typescript config is relevant tho and it's included in the mentioned repo

Order ID 💳 (optional)

No response

[m4theushw]

Thanks for reporting this. We would only see this problem when we tried to update @types/react. Fortunately, @vizv already opened #6797 fixing the bug. You can hope to have a fix landing in the next release.

For now, you can enable skipLibCheck in tsconfig.json. Enabling this flag will ignore TS errors from external libs, and also save time in the build. Another alternative is to downgrade @types/react to 18.0.24.

[meena-erian]

Hi @m4theushw, thank you so much for your response and for the helpful information.

I tried @types/react version 18.0.24 and I still get the same error. However, skipLibCheck does the trick

[m4theushw]

Fixed by #6797