bug: stencil, proxyCustomElement causing loops with pretty format plugin #25334

MrHus · 2022-05-23T14:45:39Z

Prerequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v4.x
v5.x
v6.x
Nightly

Current Behavior

I'm using React 18 in combination with @testing-library/react and @ionic/react-test-utils, and I'm getting
the following error: PrettyFormatPluginError: Invalid string length.

When an assertion fails, @testing-library/react will attempt to render the screen. It does so by calling a library called
pretty-format with a custom formatter, whose job it is to render the current screen in a human readable way.

For some reason ionic puts this mechanism in an infinite loop,

If you manually change the printObjectProperties function at node_modules/pretty-format/build/collections.js and add some logs, you can see how many times it is called.

Also when calling screen.debug() you see the same behaviour.

Expected Behavior

You expect the "screen" to be able to render when using @testing-library/react.

This did not happen in previous versions.

Steps to Reproduce

In the reproduction repo.

Run npm install
Run npm test

Focus the tests on the "blaat.test.tsx` file.

After waiting a long time it should print the error, for me it is about 120 seconds.

Code Reproduction URL

https://github.com/MrHus/ionic-react-test-fail

Ionic Info

Ionic:

Ionic CLI : 6.19.1 (/Users/redacted/.nvm/versions/node/v16.15.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 6.1.6

Capacitor:

Capacitor CLI : 3.5.1
@capacitor/android : 3.5.1
@capacitor/core : 3.5.1
@capacitor/ios : 3.5.1

Utility:

cordova-res : not installed globally
native-run : 1.6.0

System:

NodeJS : v16.15.0 (/Users/redacted/.nvm/versions/node/v16.15.0/bin/node)
npm : 8.5.5
OS : macOS Big Sur

Additional Information

No response

The text was updated successfully, but these errors were encountered:

liamdebeasi · 2022-05-23T15:46:43Z

Thanks for the issue. Can you debug this a bit more? I can reproduce this behavior, but I am not able to determine if Ionic is responsible for it. I can reproduce this using the following render code:

<IonReactRouter>
  <IonRouterOutlet></IonRouterOutlet>
 </IonReactRouter>

It is possible that there is a bug in these components, or it could be that these components trigger a bug in underlying app dependency.

MrHus · 2022-05-23T16:57:06Z

Note that rendering the following:

render(<IonBadge color="primary">Hello world!</IonBadge>)

Also gives a strange result:

Click to expand!

```

Object { "__reactFiber$i1nwtx4a2xk": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": Object { "columnNumber": 12, "fileName": "/Users/maartenhus/Projects/ionic-test/blaatje/src/blaat.test.tsx", "lineNumber": 51, }, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "flags": 1, "index": 0, "key": null, "lanes": 0, "memoizedProps": Object { "children": "Hello world!", "color": "primary", }, "memoizedState": null, "mode": 1, "pendingProps": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "return": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": [Circular], "child": null, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 0, "index": 0, "key": null, "lanes": 16, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 0, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "lastBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 1024, "index": 0, "key": null, "lanes": 0, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 6291975, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": null, "lastBaseUpdate": null, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "selfBaseDuration": 0, "sibling": null, "stateNode": null, "subtreeFlags": 6291973, "tag": 11, "treeBaseDuration": 0, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "updateQueue": null, }, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": [Function], "flags": 4194309, "index": 0, "key": null, "lanes": 0, "memoizedProps": Object { "children": "Hello world!", "color": "primary", "forwardedRef": null, }, "memoizedState": null, "mode": 1, "pendingProps": Object { "children": "Hello world!", "color": "primary", "forwardedRef": null, }, "ref": null, "return": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": Object { "columnNumber": 12, "fileName": "/Users/maartenhus/Projects/ionic-test/blaatje/src/blaat.test.tsx", "lineNumber": 51, }, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "flags": 1, "index": 0, "key": null, "lanes": 0, "memoizedProps": Object { "children": "Hello world!", "color": "primary", }, "memoizedState": null, "mode": 1, "pendingProps": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "return": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": [Circular], "child": null, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 0, "index": 0, "key": null, "lanes": 16, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 0, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "lastBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 1024, "index": 0, "key": null, "lanes": 0, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 6291975, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": null, "lastBaseUpdate": null, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "selfBaseDuration": 0, "sibling": null, "stateNode": null, "subtreeFlags": 6291973, "tag": 11, "treeBaseDuration": 0, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "updateQueue": null, }, "selfBaseDuration": 0, "sibling": null, "stateNode": ReactComponent { "_reactInternalInstance": Object {}, "_reactInternals": [Circular], "componentEl": [Circular], "context": Object {}, "props": Object { "children": "Hello world!", "color": "primary", "forwardedRef": null, }, "refs": Object {}, "setComponentElRef": [Function], "state": null, "updater": Object { "enqueueForceUpdate": [Function], "enqueueReplaceState": [Function], "enqueueSetState": [Function], "isMounted": [Function], }, }, "subtreeFlags": 2097664, "tag": 1, "treeBaseDuration": 0, "type": [Function], "updateQueue": Object { "baseState": null, "effects": null, "firstBaseUpdate": null, "lastBaseUpdate": null, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": null, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": "ion-badge", "flags": 2097664, "index": 0, "key": null, "lanes": 0, "memoizedProps": Object { "children": "Hello world!", "color": "primary", "style": undefined, }, "memoizedState": null, "mode": 1, "pendingProps": Object { "children": "Hello world!", "color": "primary", "style": undefined, }, "ref": [Function], "return": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": Object { "columnNumber": 12, "fileName": "/Users/maartenhus/Projects/ionic-test/blaatje/src/blaat.test.tsx", "lineNumber": 51, }, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "flags": 1, "index": 0, "key": null, "lanes": 0, "memoizedProps": Object { "children": "Hello world!", "color": "primary", }, "memoizedState": null, "mode": 1, "pendingProps": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "return": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": [Circular], "child": null, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 0, "index": 0, "key": null, "lanes": 16, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 0, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "lastBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 1024, "index": 0, "key": null, "lanes": 0, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 6291975, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": null, "lastBaseUpdate": null, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "selfBaseDuration": 0, "sibling": null, "stateNode": null, "subtreeFlags": 6291973, "tag": 11, "treeBaseDuration": 0, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "updateQueue": null, }, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": [Function], "flags": 4194309, "index": 0, "key": null, "lanes": 0, "memoizedProps": Object { "children": "Hello world!", "color": "primary", "forwardedRef": null, }, "memoizedState": null, "mode": 1, "pendingProps": Object { "children": "Hello world!", "color": "primary", "forwardedRef": null, }, "ref": null, "return": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": Object { "columnNumber": 12, "fileName": "/Users/maartenhus/Projects/ionic-test/blaatje/src/blaat.test.tsx", "lineNumber": 51, }, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "flags": 1, "index": 0, "key": null, "lanes": 0, "memoizedProps": Object { "children": "Hello world!", "color": "primary", }, "memoizedState": null, "mode": 1, "pendingProps": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "return": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": FiberNode { "_debugHookTypes": null, "_debugNeedsRemount": false, "_debugOwner": null, "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": [Circular], "child": null, "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 0, "index": 0, "key": null, "lanes": 16, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 0, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": null, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "lastBaseUpdate": Object { "callback": null, "eventTime": 1948.881142, "lane": 16, "next": null, "payload": Object { "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, }, "tag": 0, }, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "child": [Circular], "childLanes": 0, "deletions": null, "dependencies": null, "elementType": null, "flags": 1024, "index": 0, "key": null, "lanes": 0, "memoizedProps": null, "memoizedState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "mode": 1, "pendingProps": null, "ref": null, "return": null, "selfBaseDuration": 0, "sibling": null, "stateNode": FiberRootNode { "_debugRootType": "createRoot()", "callbackNode": null, "callbackPriority": 0, "containerInfo":

[Circular]

, "context": Object {}, "current": [Circular], "effectDuration": 0, "entangledLanes": 0, "entanglements": Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "eventTimes": Array [ 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], "expirationTimes": Array [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, ], "expiredLanes": 0, "finishedLanes": 0, "finishedWork": null, "identifierPrefix": "", "memoizedUpdaters": Set {}, "mutableReadLanes": 0, "mutableSourceEagerHydrationData": null, "onRecoverableError": [Function], "passiveEffectDuration": 0, "pendingChildren": null, "pendingContext": null, "pendingLanes": 0, "pendingUpdatersLaneMap": Array [ Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, Set {}, ], "pingCache": null, "pingedLanes": 0, "suspendedLanes": 0, "tag": 1, "timeoutHandle": -1, }, "subtreeFlags": 6291975, "tag": 3, "treeBaseDuration": 0, "type": null, "updateQueue": Object { "baseState": Object { "cache": null, "element": Object { "$typeof": Symbol(react.element), "_owner": null, "_store": Object {}, "key": null, "props": Object { "children": "Hello world!", "color": "primary", }, "ref": null, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, }, "isDehydrated": false, "pendingSuspenseBoundaries": null, "transitions": null, }, "effects": null, "firstBaseUpdate": null, "lastBaseUpdate": null, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "selfBaseDuration": 0, "sibling": null, "stateNode": null, "subtreeFlags": 6291973, "tag": 11, "treeBaseDuration": 0, "type": Object { "$typeof": Symbol(react.forward_ref), "render": [Function], }, "updateQueue": null, }, "selfBaseDuration": 0, "sibling": null, "stateNode": ReactComponent { "_reactInternalInstance": Object {}, "_reactInternals": [Circular], "componentEl": [Circular], "context": Object {}, "props": Object { "children": "Hello world!", "color": "primary", "forwardedRef": null, }, "refs": Object {}, "setComponentElRef": [Function], "state": null, "updater": Object { "enqueueForceUpdate": [Function], "enqueueReplaceState": [Function], "enqueueSetState": [Function], "isMounted": [Function], }, }, "subtreeFlags": 2097664, "tag": 1, "treeBaseDuration": 0, "type": [Function], "updateQueue": Object { "baseState": null, "effects": null, "firstBaseUpdate": null, "lastBaseUpdate": null, "shared": Object { "interleaved": null, "lanes": 0, "pending": null, }, }, }, "selfBaseDuration": 0, "sibling": null, "stateNode": [Circular], "subtreeFlags": 0, "tag": 5, "treeBaseDuration": 0, "type": "ion-badge", "updateQueue": null, }, "__reactProps$i1nwtx4a2xk": Object { "children": "Hello world!", "color": "primary", "style": undefined, }, Symbol(SameObject caches): Object { "childNodes": NodeList [ Hello world!, ], "classList": DOMTokenList { "0": "ion-color", "1": "ion-color-primary", "2": "md", }, "style": CSSStyleDeclaration { "_importants": Object {}, "_length": 0, "_onChange": [Function], "_values": Object {}, }, }, }

```

Perhaps it is something very basic in Ionic, does Ionic support React 18?

liamdebeasi · 2022-05-23T17:41:31Z

Ionic React does support React 18.

I recommend digging into what's calling printObjectProperties.

It looks like printComplexValue calls printObjectProperties. However, both printComplexValue and printObjectProperties call printer. The printer function can also call printComplexValue, so it looks like there is a case where infinite recursion can happen.

MrHus · 2022-05-25T08:06:42Z

There is a function called createReactComponent inside Ionic React,
it does the following:

            /**
             * We use createElement here instead of
             * React.createElement to work around a
             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
             * React.createElement causes all elements to be rendered
             * as <tagname> instead of the actual Web Component.
             */
            return React.createElement(tagName, newProps, children);

If you read the comment it says it does not want to use React.createElement but it does.

Here is the original source file:

https://github.com/ionic-team/ionic-framework/blob/main/packages/react/src/components/react-component-lib/createComponent.tsx

It does not use React.createElement, but createElement, so somehow the build causes this to use it.

If I change the line:

return React.createElement(tagName, newProps, children);

to:

return React.createElement(displayName, newProps, children);

Then my test shows:

   <body>
      <div>
        <ionbadge
          color="primary"
        >
          Hello world!
        </ionbadge>
      </div>
    </body

So this change makes it display inside react-testing-library correctly.

It also works when starting the app via npm start although the CSS does not seem to load for some reason.

MrHus · 2022-05-25T08:25:05Z

Downgrading to https://github.com/ionic-team/ionic-framework/releases/tag/v6.0.1 causes the problem to go away.

This is because this version lies before this change / pull request:

#24515

Which was created because of this issue:

#24229

I wonder if this cannot be reverted because the root cause has been fixed:

vitejs/vite#6104

For completions sake the output is now:

   <body>
      <div>
        <ion-badge
          class="ion-color ion-color-primary md"
          color="primary"
        >
          Hello world!
        </ion-badge>
      </div>
    </body>

Note that the name is now ion-badge instead of ionbadge with my attempt.

liamdebeasi · 2022-05-26T15:15:39Z

The issue appears to be related to a function called proxyCustomElement provided by Stencil, not the createElement change (though this function did change in 6.0.2). While there does not seem to be a bug in Ionic Framework, there may be an issue in Stencil.

I will take a closer look and follow up here when I have more to share.

khfy6hzy · 2022-06-22T08:43:02Z

Hey there, is there an update on this issue? We are also bitten by this issue when upgrading to @stencilc/core v2.14.1 which introduced the proxyCustomElement function.

liamdebeasi · 2022-06-22T14:26:50Z

Were you able to reproduce the issue outside of Ionic? (I.e. in a blank Stencil app) That would help us isolate and fix the issue quicker.

vincenthongzy · 2022-06-23T05:26:52Z

Were you able to reproduce the issue outside of Ionic? (I.e. in a blank Stencil app) That would help us isolate and fix the issue quicker.

I was able to reproduce using a React app bootstrapped from CRA https://github.com/vincenthongzy/stencil-repro. Please let me know if you require more details. I have exported a simple component, <MyComponent> from Stencil's React bindings and the screen.debug() output is unexpected.

The above screenshot is from rendering a single <MyComponent>. Trying to render more than 2 will cause the PrettyFormatPluginError: Invalid string length to occur.

After downgrading to @stencil/core@2.14.0 , screen.debug() provides the expected output:

    <body>
      <div>
        <div
          class="App"
        >
          <header
            class="App-header"
          >
            <img
              alt="logo"
              class="App-logo"
              src="logo.svg"
            />
            <p>
              Edit 
              <code>
                src/App.js
              </code>
               and save to reload.
            </p>
            <my-component
              first="hong"
            />
            <my-component
              first="hong"
            />
            <my-component
              first="hong"
            />
            <a
              class="App-link"
              href="https://reactjs.org"
              rel="noopener noreferrer"
              target="_blank"
            >
              Learn React
            </a>
          </header>
        </div>
      </div>
    </body>

liamdebeasi · 2022-06-24T13:23:59Z

Thanks! I forwarded the repo to the Stencil team who is going to investigate further: ionic-team/stencil#3434.

h-sakano · 2022-09-24T06:42:40Z

Is there any update to this Issue?
I have not been able to update from 6.0.10 because unit tests with react-testing-library are not succeeding.

vincenthongzy · 2022-09-24T06:46:58Z

@h-sakano you can check my reply here ionic-team/stencil#3434 (comment) to see if it helps

tonypatton · 2022-11-03T17:08:37Z

Any update on this issue? Seems crazy that react-testing-library and react-ionic might be broken for 6 months and there is not a larger discussion here?

staff0rd · 2022-12-08T05:17:03Z

This issue is easily reproducible in a new ionic app:

ionic start > react > tabs template
Change the generated test to use getByText
Run the test

Result:

 FAIL  src/App.test.tsx (18.379 s)
  ✕ renders without crashing (16800 ms)

  ● renders without crashing

    RangeError: Invalid string length

      at printObjectProperties (node_modules/pretty-format/build/collections.js:174:47)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printListItems (node_modules/pretty-format/build/collections.js:141:19)
      at Object.serialize (node_modules/pretty-format/build/plugins/DOMCollection.js:62:41)
      at printPlugin (node_modules/pretty-format/build/index.js:330:16)
      at printer (node_modules/pretty-format/build/index.js:379:12)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:173:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:310:48)
      at printer (node_modules/pretty-format/build/index.js:393:10)
      at node_modules/@testing-library/dom/dist/DOMElementFilter.js:44:79
...

Here's a repo where the first commit is the result of ionic start and the second commit is the change to getByText.

@vincenthongzy your reply does not solve this problem, and inspecting the result of npm why nwsapi we see:

npm why nwsapi
nwsapi@2.2.2
node_modules/nwsapi
  nwsapi@"^2.2.0" from jsdom@16.7.0
...

cuzzlor · 2023-02-09T03:44:46Z

Bump.

We're still getting this after following these instructions: https://ionic.io/blog/testing-ionic-react-apps-with-jest-and-react-testing-library and using https://github.com/ionic-team/ionic-react-test-utils

fridgeAdmin · 2023-02-12T05:21:13Z

I can't upgrade ionic/react from v6.0.1 because of this error. Even if I downgraded @stencil/core to v2.10.0.

drpicox · 2023-03-12T14:38:30Z

Still happening. I stumbled into what @staff0rd explains.

Sadly, it makes TDD/BDD a lot harder or impossible. Waiting up to 10 seconds for a test when it fails (the expected thing in TDD), without any usable error message, is not viable.

If it helps, I have added a demo repository here:

https://github.com/drpicox/ionic-screen-debug-fail

staff0rd · 2023-03-14T07:18:25Z

This is happening because @testing-library/dom expects constructor.name but @ionic/stencil does not expose constructor.name.

This can be fixed in either library:

By adding constructor.name to @ionic/stencil. This approach would then require a rebuild of @ionic/core with that change. I'm not sure how to integrate @stencil/core updates into the @ionic/core build so I haven't tested this approach. Or;
By updating @testing-library/dom to serialize items with constructor.is, a property that @stencil/core does expose. The package needs to be built, and this branch includes that output. With this approach, which I was able to test and saw this bug resolved, still has an element of complexity because @testing-library/react appears to install @testing-library/dom in its child node_modules folder. As such, to use this approach, the output of dist needs to be copied into your project's node_modules/@testing-library/react/node_modules/@testing-library/dom/dist folder to resolve the bug.

I note that with approach #2, the output of debug() is in kebab case rather than camel case, even though we're in react:

liamdebeasi · 2023-03-24T14:09:56Z

Can everyone try the following dev build, and let me know if it resolves the issue?

npm install @ionic/react@7.0.0-dev.11679666496.116ae037 @ionic/react-router@7.0.0-dev.11679666496.116ae037

Please note that this is a dev build of Ionic 7. As a result, it is subject to the Ionic 7 Migration Guide and Breaking Changes.

staff0rd · 2023-03-26T23:50:05Z

@liamdebeasi I can confirm that dev build works as expected:

import { IonSkeletonText } from '@ionic/react'
import { waitForIonicReact } from '@ionic/react-test-utils'
import { render } from '@testing-library/react'

describe('SkeletonForm', () => {
  it('should render a skeleton form', async () => {
    const { debug } = render(<IonSkeletonText />)
    await waitForIonicReact()
    debug()
  })
})

Result:

vmstarchenko · 2023-03-30T10:50:46Z

Can everyone try the following dev build, and let me know if it resolves the issue?
npm install @ionic/react@7.0.0-dev.11679666496.116ae037 @ionic/react-router@7.0.0-dev.11679666496.116ae037
Please note that this is a dev build of Ionic 7. As a result, it is subject to the Ionic 7 Migration Guide and Breaking Changes.

Everything works fine with this fix. My problem would be solved after merge.

liamdebeasi · 2023-04-11T14:29:36Z

Hi everyone,

The fix for this has been released in Stencil v3.2.1. Ionic has been updated to use that version, and this update should be available in an upcoming release of Ionic.

ionitron-bot · 2023-05-11T14:39:47Z

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

ionitron-bot bot added the triage label May 23, 2022

MrHus changed the title ~~bug:~~ bug: react PrettyFormatPluginError: Invalid string length May 23, 2022

liamdebeasi self-assigned this May 23, 2022

liamdebeasi added the needs: reply the issue needs a response from the user label May 23, 2022

liamdebeasi removed their assignment May 23, 2022

ionitron-bot bot removed the triage label May 23, 2022

ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels May 23, 2022

liamdebeasi added the needs: reply the issue needs a response from the user label May 23, 2022

ionitron-bot bot removed the triage label May 23, 2022

ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels May 25, 2022

liamdebeasi self-assigned this Jun 23, 2022

liamdebeasi mentioned this issue Jun 23, 2022

bug: proxyCustomElement causing infinite loops with react testing library ionic-team/stencil#3434

Closed

3 tasks

liamdebeasi removed their assignment Jun 24, 2022

liamdebeasi changed the title ~~bug: react PrettyFormatPluginError: Invalid string length~~ bug: stencil, proxyCustomElement causing loops with pretty format plugin Jul 12, 2022

liamdebeasi added type: bug a confirmed bug report stencil Issues that require changes in Stencil labels Jul 12, 2022

ionitron-bot bot removed the triage label Jul 12, 2022

liamdebeasi closed this as completed Apr 11, 2023

ionitron-bot bot locked and limited conversation to collaborators May 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug: stencil, proxyCustomElement causing loops with pretty format plugin #25334

bug: stencil, proxyCustomElement causing loops with pretty format plugin #25334

MrHus commented May 23, 2022

liamdebeasi commented May 23, 2022

MrHus commented May 23, 2022 •

edited

liamdebeasi commented May 23, 2022 •

edited

MrHus commented May 25, 2022 •

edited

MrHus commented May 25, 2022 •

edited

liamdebeasi commented May 26, 2022

khfy6hzy commented Jun 22, 2022

liamdebeasi commented Jun 22, 2022

vincenthongzy commented Jun 23, 2022

liamdebeasi commented Jun 24, 2022

h-sakano commented Sep 24, 2022

vincenthongzy commented Sep 24, 2022

tonypatton commented Nov 3, 2022

staff0rd commented Dec 8, 2022

cuzzlor commented Feb 9, 2023

fridgeAdmin commented Feb 12, 2023

drpicox commented Mar 12, 2023 •

edited

staff0rd commented Mar 14, 2023

liamdebeasi commented Mar 24, 2023

staff0rd commented Mar 26, 2023

vmstarchenko commented Mar 30, 2023

liamdebeasi commented Apr 11, 2023

ionitron-bot bot commented May 11, 2023

bug: stencil, proxyCustomElement causing loops with pretty format plugin #25334

bug: stencil, proxyCustomElement causing loops with pretty format plugin #25334

Comments

MrHus commented May 23, 2022

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

liamdebeasi commented May 23, 2022

MrHus commented May 23, 2022 • edited

liamdebeasi commented May 23, 2022 • edited

MrHus commented May 25, 2022 • edited

MrHus commented May 25, 2022 • edited

liamdebeasi commented May 26, 2022

khfy6hzy commented Jun 22, 2022

liamdebeasi commented Jun 22, 2022

vincenthongzy commented Jun 23, 2022

liamdebeasi commented Jun 24, 2022

h-sakano commented Sep 24, 2022

vincenthongzy commented Sep 24, 2022

tonypatton commented Nov 3, 2022

staff0rd commented Dec 8, 2022

cuzzlor commented Feb 9, 2023

fridgeAdmin commented Feb 12, 2023

drpicox commented Mar 12, 2023 • edited

staff0rd commented Mar 14, 2023

liamdebeasi commented Mar 24, 2023

staff0rd commented Mar 26, 2023

vmstarchenko commented Mar 30, 2023

liamdebeasi commented Apr 11, 2023

ionitron-bot bot commented May 11, 2023

MrHus commented May 23, 2022 •

edited

liamdebeasi commented May 23, 2022 •

edited

MrHus commented May 25, 2022 •

edited

MrHus commented May 25, 2022 •

edited

drpicox commented Mar 12, 2023 •

edited