material-ui: [Popper] Incompatible props: `onResize` and `onResizeCapture`

It seems that the issue is caused by a type mismatch between @types/react@17 and @types/react@18. As a workaround, you can add the following module augmentation code to your projects:

declare global {
  namespace React {
    interface DOMAttributes<T> {
      onResize?: ReactEventHandler<T> | undefined;
      onResizeCapture?: ReactEventHandler<T> | undefined;
      nonce?: string | undefined;
    }
  }
}

Solving this “properly” is a pickle, to be honest. Apparently DefinitelyTyped can’t add these two fields to React 17 typings, because they are only supported in 18. We may have to live with this workaround for longer, unfortunately.

Could you upgrade @types/react to latest version (v18.0.25) and check if the error is gone? These onResize and onResizeCapture were added recently in https://github.com/DefinitelyTyped/DefinitelyTyped/pull/63076. My guess is that because of this change MUI only works now with @types/react: ^18.0.25.

Definitely wasn’t expecting a patch release to blow up my build… getting this:

node_modules/@mui/material/Popper/Popper.d.ts:36:73 - error TS2344: Type '"key" | "id" | "open" | "color" | "container" | "transition" | "translate" | "hidden" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | ... 256 more ... | "componentsProps"' does not satisfy the constraint '"key" | "id" | "open" | "color" | "container" | "transition" | "translate" | "hidden" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | ... 255 more ... | "componentsProps"'.
  Type '"onResize"' is not assignable to type '"key" | "id" | "open" | "color" | "container" | "transition" | "translate" | "hidden" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | ... 255 more ... | "componentsProps"'. Did you mean '"onReset"'?

36 declare const Popper: React.ForwardRefExoticComponent<Pick<PopperProps, "hidden" | "color" | "style" | "open" | "translate" | "transition" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "onResize" | "onResizeCapture" | "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" | "component" | "sx" | "components" | "container" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots" | "componentsProps"> & React.RefAttributes<HTMLDivElement>>;

We’re not planning to remove support for React 17.

There is a more elegant solution to this problem if you don’t want to declare the module globally.

steps:

1. declare an explicitly “undefined” values <Popper {...props} nonce={undefined} onResize={undefined} onResizeCapture={undefined}>

2. in the typescript configuration (tsconfig), add the option => “skipLibCheck”: true. { "compilerOptions": { ...otherProps, "skipLibCheck": true }, }

just before that, read in the documentation what this property (skipLibCheck) does exactly. I always use this option, so it’s not a problem for me.

BINGO

<Popper
  onResize={undefined}
  onResizeCapture={undefined}
  ...
/>

will mitigate the issue until future fix 😉

Although this might throw in your tests:

Warning: Unknown event handler property `onResizeCapture`. It will be ignored.

😕

Should react 17 be removed from supported versions? Or this workaround (https://github.com/mui/material-ui/issues/35287#issuecomment-1337250566) should be added to mui code?

To reiterate for those who can upgrade: it works on React 18 (18.2.0) along with the latest version of @types/react (18.0.26)

I have the same issue on Popper and Timeline components after updating Mui packages to latest version:

• “@mui/icons-material”: “^5.10.16”
• “@mui/lab”: “^5.0.0-alpha.110”
• “@mui/material”: “^5.10.16”
• “@mui/styles”: “^5.10.16”

same Typescript error: Type '{ children: Element[]; sx: { p: number; }; }' is missing the following properties from type 'Pick<TimelineProps, "classes" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | ... 252 more ... | "onResizeCapture">': nonce, onResize, onResizeCapture

Same here, works fine with React 18.2.0 and @types/react 18.0.26. Thanks @kurtwaldowski-echelon

Tagging @mui/core since it looks like a high priority issue. I am not certain if it’s related to #35273. Also not sure what’s the fix but I think we need to support latest version of @types/react for React 17 as well. It would be compatible for MUI users using React 17.

Just upgraded to "@mui/material": "5.11.9" - still having this issue.

Hello, I have quickly install it and run npm run type-check in my project. It works, doesn’t appear any type check in Popper element like before. Thank you!

My version of react is : 17.0.2

@eps1lon How about this? https://github.com/xandris/mui-35287

How about using @types/react@18 with react@17 as an alternative solution to this issue? Are there any downsides to this?

Technically it may work, but you’d get types for a library you don’t use, which may be confusing at best (or you won’t be able to type-check a valid program). The workaround I proposed also introduces attributes that don’t exist at runtime, but it only does it for these two attributes. I don’t know how many differences are there between types of React 17 and 18, but I bet there are more than just these two attributes.

@eps1lon, as a maintainer of React types, do you have any ideas on how to best resolve this issue?

Just to help ^ this also occurs on react 18 unless using the latest react/types - upgrading that removed this for me

I understand it occurs only when using React 17, right? I wasn’t able to reproduce it using 18 (https://codesandbox.io/s/agitated-mestorf-eheb0b?file=/src/App.tsx).

I’m looking into it.

It’s just been released in https://github.com/mui/material-ui/releases/tag/v5.11.8

“@mui/material”: “https://pkg.csb.dev/mui/material-ui/commit/05fd9443/@mui/material”

Works for me with react v17.0.2! Great job!

Should react 17 be removed from supported versions? Or this workaround (#35287 (comment)) should be added to mui code?

Please don’t remove React 17. It’s complex enough to migrate a bigger project to MUI 5, enforcing a major version upgrade on React renders gentle migration impossible.

@IdoiaRojo If you don’t use Popper, this also happens on Timeline and probably other components though.

The Pick<> comes from React types (PropsWithoutRef is defined as such), and we have no control over its shape. However, its possible to specify the return type without using PropsWithoutRef, which is what I’m doing in #36013

I made some additional changes. Could you please once again verify the build? The latest bits are available at https://pkg.csb.dev/mui/material-ui/commit/ff29f383/@mui/material

Sorry, I’m not a familiar with the development workflow here and would like to ask when is expected to be release ?

@MartinYankovPP once the PR is approved, I’ll merge it, and it’ll land in the next release. We usually release new versions on Mondays, so there’s a chance it’ll be the next one.

Thanks, the new commit also looks good to me. At least doesn’t make any problems for the build.

I made some additional changes. Could you please once again verify the build? The latest bits are available at https://pkg.csb.dev/mui/material-ui/commit/ff29f383/@mui/material

Sorry, I’m not a familiar with the development workflow here and would like to ask when is expected to be release ?

@MartinYankovPP once the PR is approved, I’ll merge it, and it’ll land in the next release. We usually release new versions on Mondays, so there’s a chance it’ll be the next one.

“@mui/material”: “https://pkg.csb.dev/mui/material-ui/commit/05fd9443/@mui/material”

Looks good in our project. We’re using react v17.0.2 as well. I am a colleague of @mbmx10

Same here, works fine with React 18.2.0 and @types/react 18.0.26. Thanks @kurtwaldowski-echelon

I can’t confirm that unfortunately. I am using React 18.2.0 and @types/react 18.0.26 and the problem is still present

I also wasn’t able to fix the problem with @types/react 18.0.26 at first but knowing that the TS compiler in VS Code is stubborn at times I restarted VS Code and the problem has gone now.

Same here, works fine with React 18.2.0 and @types/react 18.0.26. Thanks @kurtwaldowski-echelon

I can’t confirm that unfortunately. I am using React 18.2.0 and @types/react 18.0.26 and the problem is still present