2017-12-07 21:37:01 -06:00
|
|
|
{
|
|
|
|
|
"name": "@ionic/react",
|
2026-04-01 19:53:17 +00:00
|
|
|
"version": "8.8.3",
|
2017-12-07 21:37:01 -06:00
|
|
|
"description": "React specific wrapper for @ionic/core",
|
|
|
|
|
"keywords": [
|
|
|
|
|
"ionic",
|
|
|
|
|
"framework",
|
2018-12-14 14:54:28 -06:00
|
|
|
"react",
|
2017-12-07 21:37:01 -06:00
|
|
|
"mobile",
|
|
|
|
|
"app",
|
|
|
|
|
"hybrid",
|
|
|
|
|
"webapp",
|
|
|
|
|
"cordova",
|
|
|
|
|
"progressive web app",
|
|
|
|
|
"pwa"
|
|
|
|
|
],
|
|
|
|
|
"license": "MIT",
|
|
|
|
|
"repository": {
|
|
|
|
|
"type": "git",
|
2023-04-24 07:04:10 -06:00
|
|
|
"url": "git+https://github.com/ionic-team/ionic-framework.git"
|
2017-12-07 21:37:01 -06:00
|
|
|
},
|
|
|
|
|
"scripts": {
|
2019-08-13 22:24:44 +02:00
|
|
|
"build": "npm run clean && npm run copy && npm run compile",
|
2023-11-09 11:50:19 -05:00
|
|
|
"build.watch": "npm run compile -- --watch",
|
2023-11-06 14:23:48 -05:00
|
|
|
"clean": "rimraf dist && rimraf routing",
|
|
|
|
|
"compile": "rollup -c",
|
2023-01-18 16:49:25 -05:00
|
|
|
"eslint": "eslint src",
|
|
|
|
|
"prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\"",
|
|
|
|
|
"lint": "npm run eslint && npm run prettier -- --write --cache",
|
|
|
|
|
"lint.fix": "npm run eslint -- --fix && npm run prettier -- --write --cache",
|
2019-08-13 22:24:44 +02:00
|
|
|
"copy": "node scripts/copy.js",
|
2019-10-07 10:37:20 -06:00
|
|
|
"test.spec": "jest --ci",
|
2025-09-03 23:54:11 +01:00
|
|
|
"sync": "sh ./scripts/sync.sh",
|
|
|
|
|
"local.sync.and.pack": "./scripts/sync-and-pack.sh"
|
2017-12-07 21:37:01 -06:00
|
|
|
},
|
2019-06-19 21:33:50 +02:00
|
|
|
"main": "dist/index.js",
|
|
|
|
|
"types": "dist/types/index.d.ts",
|
2017-12-07 21:37:01 -06:00
|
|
|
"files": [
|
2019-08-13 22:24:44 +02:00
|
|
|
"dist/",
|
|
|
|
|
"css/"
|
2017-12-07 21:37:01 -06:00
|
|
|
],
|
2019-06-19 21:33:50 +02:00
|
|
|
"dependencies": {
|
2026-04-01 19:53:17 +00:00
|
|
|
"@ionic/core": "^8.8.3",
|
2025-07-09 09:00:57 -07:00
|
|
|
"ionicons": "^8.0.13",
|
2019-08-13 22:24:44 +02:00
|
|
|
"tslib": "*"
|
2019-06-19 21:33:50 +02:00
|
|
|
},
|
|
|
|
|
"peerDependencies": {
|
2020-12-08 16:17:16 -05:00
|
|
|
"react": ">=16.8.6",
|
|
|
|
|
"react-dom": ">=16.8.6"
|
2019-06-19 21:33:50 +02:00
|
|
|
},
|
2017-12-07 21:37:01 -06:00
|
|
|
"devDependencies": {
|
2023-01-18 16:49:25 -05:00
|
|
|
"@ionic/eslint-config": "^0.3.0",
|
|
|
|
|
"@ionic/prettier-config": "^2.0.0",
|
2023-11-06 14:23:48 -05:00
|
|
|
"@rollup/plugin-typescript": "^11.1.5",
|
2020-12-07 09:31:33 -07:00
|
|
|
"@testing-library/jest-dom": "^5.11.6",
|
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`](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/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](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69006#discussioncomment-8826095)
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
2024-03-19 13:36:29 -04:00
|
|
|
"@testing-library/react": "^12.1.5",
|
2021-10-05 06:44:40 -06:00
|
|
|
"@testing-library/react-hooks": "^7.0.1",
|
2020-12-07 09:31:33 -07:00
|
|
|
"@types/jest": "^26.0.15",
|
2020-06-29 10:21:06 -05:00
|
|
|
"@types/node": "^14.0.14",
|
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`](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/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](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69006#discussioncomment-8826095)
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
2024-03-19 13:36:29 -04:00
|
|
|
"@types/react": "^17.0.79",
|
|
|
|
|
"@types/react-dom": "^17.0.25",
|
2023-01-18 16:49:25 -05:00
|
|
|
"@typescript-eslint/eslint-plugin": "^5.48.2",
|
|
|
|
|
"@typescript-eslint/parser": "^5.48.2",
|
|
|
|
|
"eslint": "^7.32.0",
|
2020-06-29 10:21:06 -05:00
|
|
|
"fs-extra": "^9.0.1",
|
2024-08-20 12:10:12 -07:00
|
|
|
"jest": "^29.7.0",
|
|
|
|
|
"jest-environment-jsdom": "^29.7.0",
|
2020-08-21 16:00:40 -04:00
|
|
|
"np": "^6.4.0",
|
2023-01-18 16:49:25 -05:00
|
|
|
"prettier": "^2.8.3",
|
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`](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/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](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69006#discussioncomment-8826095)
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
2024-03-19 13:36:29 -04:00
|
|
|
"react": "^17.0.2",
|
|
|
|
|
"react-dom": "^17.0.2",
|
2020-11-04 16:19:38 -05:00
|
|
|
"rimraf": "^3.0.2",
|
2023-11-07 10:21:46 -05:00
|
|
|
"rollup": "^4.2.0",
|
2024-08-20 12:10:12 -07:00
|
|
|
"ts-jest": "^29.1.3",
|
|
|
|
|
"typescript": "^5.0.0"
|
2019-02-20 15:35:20 -06:00
|
|
|
},
|
|
|
|
|
"jest": {
|
2024-08-20 12:10:12 -07:00
|
|
|
"testEnvironment": "jsdom",
|
2019-02-20 15:35:20 -06:00
|
|
|
"preset": "ts-jest",
|
2019-06-19 21:33:50 +02:00
|
|
|
"setupFilesAfterEnv": [
|
|
|
|
|
"<rootDir>/jest.setup.js"
|
|
|
|
|
],
|
2019-02-20 15:35:20 -06:00
|
|
|
"testPathIgnorePatterns": [
|
2021-10-12 15:10:03 -06:00
|
|
|
"cypress",
|
2019-02-20 15:35:20 -06:00
|
|
|
"node_modules",
|
2019-08-13 22:24:44 +02:00
|
|
|
"dist",
|
2023-03-17 16:21:21 -04:00
|
|
|
"test/base/*",
|
|
|
|
|
"test/apps/*",
|
|
|
|
|
"test/build/*"
|
2019-06-19 21:33:50 +02:00
|
|
|
],
|
|
|
|
|
"modulePaths": [
|
|
|
|
|
"<rootDir>"
|
2019-02-20 15:35:20 -06:00
|
|
|
]
|
2023-01-18 16:49:25 -05:00
|
|
|
},
|
|
|
|
|
"prettier": "@ionic/prettier-config"
|
2017-12-07 21:37:01 -06:00
|
|
|
}
|
