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 type error in component GridToolbarExport after update to @material-ui/data-grid 4.0.0-alpha.32 #2000

Closed
2 tasks done
sgranadosa opened this issue Jun 28, 2021 · 5 comments · Fixed by #2393
Closed
2 tasks done
Labels
component: data grid This is the name of the generic UI component, not the React module! ready to take Help wanted. Guidance available. There is a high chance the change will be accepted typescript v5.x

Comments

@sgranadosa
Copy link

Typescript type error in component GridToolbarExport after update version, "error Type '{}' is missing the following properties"

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

TypeScript error is shown when I import component

The error is:
"Type '{}' is missing the following properties from type 'Pick<GridToolbarExportProps, "children" | "form" | "slot" | "style" | "title" | "color" | "translate" | "className" | "classes" | "key" | "defaultChecked" | ... 274 more ... | "csvOptions">': buttonRef, innerRef "

Expected Behavior 🤔

On previous version I imported the component without any prop just like that :

Steps to Reproduce 🕹

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQokscA3nXHAPSdwwAWWOLhKQAdllEx0ATwgBXOHNRYAJnQC+cIiXIABEMhhYowZABsAtHOCdhlMg3DR4bDgHETKgCoQIZgEbIUADCEJLIwOJQADTscB7A3r4BQaFmciCiqABCcjAwYbHunj5+gVAAYsBmRlC5+YVxCUllQQAiEqjAMNIAylhmWPjQRfElyeUAogAeTDCxmtqkZPqGxqaW1pwqhsgWAOaetHR0BHKi+MBhcB0gEAAUAJSscZQwclCicPdxHAA8zVKKRCYRgESiAD5fhw4ADxq0QelMjk8gUvpwoTCYXDEkDylUasZ6miuJisbDARN2p1un0BkMClBSdD-pSETM5sysX9OGzgaFwpFjGTHvR1EA

Steps:

  1. Go to the url and see the error over the GridToolbarExport

Context 🔦

I've been using GridToolbarExport because I created a CustomToolbar.
Recently I update material ui from :
"@material-ui/core": "^5.0.0-alpha.33",
"@material-ui/data-grid": "^4.0.0-alpha.27",
"@material-ui/icons": "^5.0.0-alpha.29",
"@material-ui/lab": "^5.0.0-alpha.33",

to :
"@material-ui/core": "^5.0.0-alpha.37",
"@material-ui/data-grid": "^4.0.0-alpha.32",
"@material-ui/icons": "^5.0.0-alpha.37",
"@material-ui/lab": "^5.0.0-alpha.37",
"@material-ui/styles": "^5.0.0-alpha.35",

and with this new version the component ask me for something new that I can't find in documentation

the error says:

"Type '{}' is missing the following properties from type 'Pick<GridToolbarExportProps, "children" | "form" | "slot" | "style" | "title" | "color" | "translate" | "className" | "classes" | "key" | "defaultChecked" | ... 274 more ... | "csvOptions">': buttonRef, innerRef "

`npx @material-ui/envinfo`

System:
OS: macOS 11.3.1
Binaries:
Node: 16.2.0 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 7.13.0 - /usr/local/bin/npm
Browsers:
Chrome: 91.0.4472.114
Edge: Not Found
Firefox: 85.0.2
Safari: 14.1
npmPackages:
@emotion/react: ^11.1.5 => 11.1.5
@emotion/styled: ^11.1.5 => 11.3.0
@material-ui/core: ^5.0.0-alpha.37 => 5.0.0-alpha.37
@material-ui/data-grid: ^4.0.0-alpha.32 => 4.0.0-alpha.32
@material-ui/icons: ^5.0.0-alpha.37 => 5.0.0-alpha.37
@material-ui/lab: ^5.0.0-alpha.37 => 5.0.0-alpha.37
@material-ui/private-theming: 5.0.0-alpha.35
@material-ui/styled-engine: 5.0.0-alpha.34
@material-ui/styles: ^5.0.0-alpha.35 => 5.0.0-alpha.35
@material-ui/system: 5.0.0-alpha.37
@material-ui/types: 6.0.1
@material-ui/unstyled: 5.0.0-alpha.37
@material-ui/utils: 5.0.0-alpha.35
@types/react: ^17.0.1 => 17.0.4
react: ^17.0.1 => 17.0.2
react-dom: ^17.0.1 => 17.0.2
typescript: ^4.1.3 => 4.2.4

tsconfig:

"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"suppressImplicitAnyIndexErrors": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]

@eps1lon eps1lon transferred this issue from mui/material-ui Jun 30, 2021
@oliviertassinari
Copy link
Member

oliviertassinari commented Jun 30, 2021

A live reproduction: https://codesandbox.io/s/typescript-playground-export-forked-zyy27?file=/index.tsx.

Looking at the generated types, it's going completely sideway:

declare const GridToolbarDensitySelector: React$1.ForwardRefExoticComponent<Pick<ButtonProps<"button", {}>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "key" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "disableFocusRipple" | "href" | "size" | "variant" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | keyof _material_ui_core_OverridableComponent.CommonProps<_material_ui_core_Button.ButtonTypeMap<{}, "button">>> & React$1.RefAttributes<HTMLButtonElement>>;

https://unpkg.com/browse/@material-ui/[email protected]/dist/data-grid.d.ts

A simple solution is likely to manually define the type of this component, and call it a day.

From https://codesandbox.io/s/typescript-playground-export-forked-32ml7?file=/index.tsx to https://codesandbox.io/s/typescript-playground-export-forked-pq82o?file=/index.tsx

x the 4 toolbar components

@oliviertassinari oliviertassinari added component: data grid This is the name of the generic UI component, not the React module! ready to take Help wanted. Guidance available. There is a high chance the change will be accepted typescript v5.x labels Jun 30, 2021
@michallukowski
Copy link
Contributor

I mentioned this problem and solution here: #1695 (comment)

@oliviertassinari
Copy link
Member

oliviertassinari commented Jul 6, 2021

Ok, so TL;DR, the solution is to do like in the core repo:

diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx
index 8cafcc05..5db60974 100644
--- a/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx
+++ b/packages/grid/_modules_/grid/components/toolbar/GridToolbarFilterButton.tsx
@@ -122,4 +122,4 @@ export const GridToolbarFilterButton = React.forwardRef<
       </Button>
     </Tooltip>
   );
-});
+}) as (props: GridToolbarFilterButtonProps) => JSX.Element;

x the 4 components.

@jberrydev
Copy link

I am getting this error in these versions:

    "@mui/x-data-grid": "5.17.13",
    "@mui/x-data-grid-pro": "5.17.13",
Type '{}' is missing the following properties from type 'Pick<ButtonProps<"button", 
{}>, "form" | "slot" | "title" | "color" | "translate" | "hidden" | "size" | "disabled" | "children" | "sx" | keyof CommonProps | ... 275 more ... | "onResizeCapture">': nonce, onResize, onResizeCapture

for these components

      <GridToolbarColumnsButton />
      <GridToolbarDensitySelector />
      <GridToolbarFilterButton />

@fryck
Copy link

fryck commented Nov 29, 2022

@jberrydev same for me with version 5.17.13

It seems that types are break since version 5.17.12

When I downgrade to 5.17.11 it works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! ready to take Help wanted. Guidance available. There is a high chance the change will be accepted typescript v5.x
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants