Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 58d217d

Browse files
authoredMar 19, 2024
fix(react): avoid definitely typed errors with @types/react@18 (#29182)
Issue number: resolves #29178 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> [DefinitelyTyped removed the `onPointerEnterCaptured` and `onPointerLeaveCaptured` types for `@types/react`](DefinitelyTyped/DefinitelyTyped#69006). This caused issues when multiple versions of `@types/react` are installed where an older version inlined these types, but they did not exist in newer versions. For Ionic React, we build with React 16 which did inline the types. In an Ionic React starter app we build with React 18 which does not want these types. As a result, there is a type mismatch. Note that this type change is being [reverted in React 16-17](DefinitelyTyped/DefinitelyTyped#69006 (comment)) so presumably this issue will go away in its own for those versions. However, developers are building with React 18 too, so this issue will persist for those developers. However, React 17 should still have this problem (at least until the change is reverted), yet the build here passes. The main difference is that the `onPointer{Enter,Leave}Captured` event is no longer inlined. After talking with the Stencil team this is the current understanding of why the issue no longer reproduces. **Building with React 17** ```ts import type { JSX as LocalJSX } from '@ionic/core/components'; import React from 'react'; import type { IonicReactProps } from './IonicReactProps'; export declare const IonRouterOutlet: React.ForwardRefExoticComponent<Pick<LocalJSX.IonRouterOutlet & { basePath?: string | undefined; ref?: React.Ref<any> | undefined; ionPage?: boolean | undefined; } & IonicReactProps & Omit<React.HTMLAttributes<HTMLIonRouterOutletElement>, "style" | "placeholder">, "children" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "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" | "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" | keyof IonicReactProps | keyof LocalJSX.IonRouterOutlet | "basePath" | "ionPage"> & React.RefAttributes<HTMLIonRouterOutletElement>>; ``` **Building with React 18** ```ts export declare const IonRouterOutlet: React.ForwardRefExoticComponent<Omit<LocalJSX.IonRouterOutlet & { basePath?: string | undefined; ref?: React.Ref<any> | undefined; ionPage?: boolean | undefined; } & IonicReactProps & Omit<React.HTMLAttributes<HTMLIonRouterOutletElement>, "style" | "placeholder">, "ref"> & React.RefAttributes<HTMLIonRouterOutletElement>>; ``` ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated types in our React test apps and verified that the [issue reproduces there without this fix](https://github.com/ionic-team/ionic-framework/actions/runs/8345186602). - Updated Ionic React and Ionic React Router to build with React 17. ## Does this introduce a breaking change? - [ ] Yes - [x] No Ionic v7 expects React 17 or newer, so building with React 17 instead of React 16 is not a breaking change. <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: `7.8.1-dev.11710859149.114e57ae` Verified with sample repro
1 parent 73d661a commit 58d217d

File tree

7 files changed

+638
-315
lines changed

7 files changed

+638
-315
lines changed
 

‎packages/react-router/package-lock.json

Lines changed: 61 additions & 47 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/react-router/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,16 @@
5050
"@ionic/prettier-config": "^2.0.0",
5151
"@rollup/plugin-typescript": "^11.1.5",
5252
"@types/node": "^14.0.14",
53-
"@types/react": "16.14.0",
54-
"@types/react-dom": "^16.9.0",
53+
"@types/react": "^17.0.79",
54+
"@types/react-dom": "^17.0.25",
5555
"@types/react-router": "^5.0.3",
5656
"@types/react-router-dom": "^5.1.5",
5757
"@typescript-eslint/eslint-plugin": "^5.48.2",
5858
"@typescript-eslint/parser": "^5.48.2",
5959
"eslint": "^7.32.0",
6060
"prettier": "^2.8.3",
61-
"react": "^16.9.0",
62-
"react-dom": "^16.9.0",
61+
"react": "^17.0.2",
62+
"react-dom": "^17.0.2",
6363
"react-router": "^5.0.1",
6464
"react-router-dom": "^5.0.1",
6565
"rimraf": "^3.0.2",

‎packages/react-router/test/apps/reactrouter5/package-lock.json

Lines changed: 14 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)
Please sign in to comment.