[DataGrid] TypeScript error on 'GridToolbarFilterButtonProps' after upgrading @mui/material to v5.0.3

[destegabry]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

After upgrading the core to the latest version (5.0.3) I'm getting this typescript error running tsc:

$ tsc --project tsconfig.json && eslint --ignore-path .gitignore --fix --ext js,jsx,ts,tsx .

node_modules/@mui/x-data-grid-pro/x-grid.d.ts:2414:11 - error TS2430: Interface 'GridToolbarFilterButtonProps' incorrectly extends interface 'Omit<TooltipProps, "title" | "children">'.
  Types of property 'componentsProps' are incompatible.
    Type '{ button?: ButtonProps<"button", {}> | undefined; } | undefined' is not assignable to type '{ popper?: (PopperProps & TooltipComponentsPropsOverrides) | undefined; transition?: (TransitionProps & TooltipComponentsPropsOverrides) | undefined; tooltip?: (HTMLProps<...> & ... 1 more ... & TooltipComponentsPropsOverrides) | undefined; arrow?: (HTMLProps<...> & ... 1 more ... & TooltipComponentsPropsOverrides) ...'.
      Type '{ button?: ButtonProps<"button", {}> | undefined; }' has no properties in common with type '{ popper?: (PopperProps & TooltipComponentsPropsOverrides) | undefined; transition?: (TransitionProps & TooltipComponentsPropsOverrides) | undefined; tooltip?: (HTMLProps<...> & ... 1 more ... & TooltipComponentsPropsOverrides) | undefined; arrow?: (HTMLProps<...> & ... 1 more ... & TooltipComponentsPropsOverrides) ...'.

2414 interface GridToolbarFilterButtonProps extends Omit<TooltipProps, 'title' | 'children'> {

Expected behavior 🤔

The app build works 😅

Steps to reproduce 🕹

Steps:

1. update @mui/material to v5.0.3
2. run tsc
3. get the error in console

Context 🔦

Relevant package.json content:

"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@mui/lab": "^5.0.0-alpha.50",
"@mui/material": "^5.0.3",
"@mui/styles": "^5.0.1",
"@mui/x-data-grid-pro": "5.0.0-beta.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 11.6
  Binaries:
    Node: 16.9.1 - /opt/homebrew/bin/node
    Yarn: Not Found
    npm: 7.21.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: 94.0.992.37
    Firefox: 86.0.1
    Safari: 15.0
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.50 
    @mui/lab: ^5.0.0-alpha.50 => 5.0.0-alpha.50 
    @mui/material: ^5.0.3 => 5.0.3 
    @mui/private-theming:  5.0.1 
    @mui/styled-engine:  5.0.1 
    @mui/styles: ^5.0.1 => 5.0.1 
    @mui/system:  5.0.3 
    @mui/types:  7.0.0 
    @mui/utils:  5.0.1 
    @mui/x-data-grid-pro: 5.0.0-beta.2 => 5.0.0-beta.2 
    @mui/x-license-pro:  5.0.0-beta.2 
    @types/react: ^17.0.27 => 17.0.27 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.4.3 => 4.4.3 

Order ID 💳 (optional)

29385

[destegabry]

Meanwhile @mui/[email protected] rolled out, now I'm getting more issues:

$ tsc --project tsconfig.json && eslint --ignore-path .gitignore --fix --ext js,jsx,ts,tsx .

node_modules/@mui/x-data-grid-pro/x-grid.d.ts:2:23 - error TS2688: Cannot find type definition file for 'node'.

2 /// <reference types="node" />
                        ~~~~

node_modules/@mui/x-data-grid-pro/x-grid.d.ts:2443:11 - error TS2430: Interface 'GridToolbarFilterButtonProps' incorrectly extends interface 'Omit<TooltipProps, "title" | "children">'.
  Types of property 'componentsProps' are incompatible.
    Type '{ button?: ButtonProps<"button", {}> | undefined; } | undefined' is not assignable to type '{ popper?: (PopperProps & TooltipComponentsPropsOverrides) | undefined; transition?: (TransitionProps & TooltipComponentsPropsOverrides) | undefined; tooltip?: (HTMLProps<...> & ... 1 more ... & TooltipComponentsPropsOverrides) | undefined; arrow?: (HTMLProps<...> & ... 1 more ... & TooltipComponentsPropsOverrides) ...'.
      Type '{ button?: ButtonProps<"button", {}> | undefined; }' has no properties in common with type '{ popper?: (PopperProps & TooltipComponentsPropsOverrides) | undefined; transition?: (TransitionProps & TooltipComponentsPropsOverrides) | undefined; tooltip?: (HTMLProps<...> & ... 1 more ... & TooltipComponentsPropsOverrides) | undefined; arrow?: (HTMLProps<...> & ... 1 more ... & TooltipComponentsPropsOverrides) ...'.

2443 interface GridToolbarFilterButtonProps extends Omit<TooltipProps, 'title' | 'children'> {
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@mui/x-data-grid-pro/x-grid.d.ts:3932:14 - error TS2503: Cannot find namespace 'NodeJS'.

3932     timeout: NodeJS.Timeout | null;
                  ~~~~~~


Found 3 errors.

[m4theushw]

To help us triage the problem, does downgrading @mui/material to 5.0.2 solves the error?

[destegabry]

Downgrading doesn't fix the issue, this is very strange as I didn't noticed it before.

(I've already tried deleting node_modules and package-lock.json)

[m4theushw]

mui/material-ui#28692 added the componentsProps which broke our definitions. It should compile with MUI Core 5.0.2 without errors. We will fix this in the next release. For now, you can try enabling skipLibCheck to snooze the error.

Here's a possible fix to close this issue:

diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx
index c654d102..7f4c8705 100644
--- a/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx
+++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx
@@ -35,7 +35,9 @@ export interface GridToolbarFilterButtonProps extends Omit<TooltipProps, 'title'
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps?: {
+  componentsProps?: ('componentsProps' extends keyof TooltipProps
+    ? Pick<TooltipProps, 'componentsProps'>
+    : {}) & {
     button?: ButtonProps;
   };
 }

[destegabry]

I already enabled skipLibCheck to make it work, I will look forward for the patched version. Thank you!

[alexfauquette]

The correction is merged. It will be available in the next release