[0.74-rc.5] `Modal` component failed to render in runtime (iOS simu & Android emu) & tests (Test Renderer)

[mdjastrzebski]

Description

When rendering Modal component exported from react-native package, it fails to render both in runtime on iOS and Android, as well as in test under React Test Renderer (here it was detected). The issue occurs under RN 0.74-rc.5 but it worked fine RN 0.73.x and earlier.

I've located the nightly that broke that code (at least under Test Renderer):

• 0.74.0-nightly-20231108-05d92bf2a - good
• 0.74.0-nightly-20231109-9320174df - bad

Even basic test using Modal fails:

import {Modal} from 'react-native';
import React from 'react';
import {it} from '@jest/globals';
import renderer from 'react-test-renderer';

it('renders Modal correctly', () => {
 renderer.create(<Modal />);
});

Error:

.../node_modules/react-native/src/private/specs/components/DebuggingOverlayNativeComponent.js: Unsupported param type for method "highlightTraceUpdates", param "updates". Found $ReadOnlyArray

In some other circumstances in can also fail with following message:

Invariant Violation: getInspectorDataForViewAtPoint should not be used if React DevTools hook is not injected

Steps to reproduce

1. Download repro repo: https://github.com/mdjastrzebski/rn-74-modal-repro/
2. yarn install
3. yarn test

React Native Version

0.74.0-rc.5

Affected Platforms

Other (please specify)

Output of npx react-native info

info Fetching system and libraries information...
System:
 OS: macOS 14.4
 CPU: (12) x64 Intel(R) Core(TM) i5-10600 CPU @ 3.30GHz
 Memory: 3.04 GB / 24.00 GB
 Shell:
 version: "5.9"
 path: /bin/zsh
Binaries:
 Node:
 version: 18.12.1
 path: ~/.nvm/versions/node/v18.12.1/bin/node
 Yarn:
 version: 4.1.1
 path: ~/.nvm/versions/node/v18.12.1/bin/yarn
 npm:
 version: 8.19.2
 path: ~/.nvm/versions/node/v18.12.1/bin/npm
 Watchman:
 version: 2024.01.22.00
 path: /usr/local/bin/watchman
Managers:
 CocoaPods:
 version: 1.12.1
 path: /Users/maciej/.rbenv/shims/pod
SDKs:
 iOS SDK: Not Found
 Android SDK:
 API Levels:
 - "31"
 - "33"
 Build Tools:
 - 30.0.3
 - 31.0.0
 - 33.0.0
 - 33.0.2
 System Images:
 - android-31 | Google APIs Intel x86_64 Atom
 - android-33 | Google APIs Intel x86_64 Atom
 Android NDK: Not Found
IDEs:
 Android Studio: 2022.2 AI-222.4459.24.2221.10121639
 Xcode:
 version: /undefined
 path: /usr/bin/xcodebuild
Languages:
 Java:
 version: 16.0.2
 path: /usr/bin/javac
 Ruby:
 version: 2.7.5
 path: /Users/maciej/.rbenv/shims/ruby
npmPackages:
 "@react-native-community/cli": Not Found
 react:
 installed: 18.2.0
 wanted: 18.2.0
 react-native:
 installed: 0.74.0-rc.5
 wanted: 0.74.0-rc.5
 react-native-macos: Not Found
npmGlobalPackages:
 "*react-native*": Not Found
Android:
 hermesEnabled: true
 newArchEnabled: false
iOS:
 hermesEnabled: Not found
 newArchEnabled: false

Stacktrace or Logs

● renders Modal correctly

 /Users/maciej/Development/OpenSource/Temp/reproducer-react-native/ReproducerApp/node_modules/react-native/src/private/specs/components/DebuggingOverlayNativeComponent.js: Unsupported param type for method "highlightTraceUpdates", param "updates". Found $ReadOnlyArray

 18 |
 19 | it('renders Modal correctly', () => {
 > 20 | renderer.create(<Modal />);
 | ^
 21 | });
 22 |
 23 | it('renders Modal with children correctly', () => {

 at node_modules/@react-native/babel-plugin-codegen/node_modules/@react-native/codegen/lib/parsers/flow/components/commands.js:77:15
 at Array.map (<anonymous>)
 at buildCommandSchema (node_modules/@react-native/babel-plugin-codegen/node_modules/@react-native/codegen/lib/parsers/flow/components/commands.js:35:40)
 at node_modules/@react-native/babel-plugin-codegen/node_modules/@react-native/codegen/lib/parsers/flow/components/commands.js:102:22
 at Array.map (<anonymous>)
 at getCommands (node_modules/@react-native/babel-plugin-codegen/node_modules/@react-native/codegen/lib/parsers/flow/components/commands.js:102:6)
 at buildComponentSchema (node_modules/@react-native/babel-plugin-codegen/node_modules/@react-native/codegen/lib/parsers/flow/components/index.js:36:20)
 at buildSchemaFromConfigType (node_modules/@react-native/babel-plugin-codegen/node_modules/@react-native/codegen/lib/parsers/parsers-commons.js:462:34)
 at buildSchema (node_modules/@react-native/babel-plugin-codegen/node_modules/@react-native/codegen/lib/parsers/parsers-commons.js:526:10)
 at FlowParser.parseString (node_modules/@react-native/babel-plugin-codegen/node_modules/@react-native/codegen/lib/parsers/flow/parser.js:134:12)
 at parseFile (node_modules/@react-native/babel-plugin-codegen/index.js:36:23)
 at generateViewConfig (node_modules/@react-native/babel-plugin-codegen/index.js:49:18)
 at PluginPass.exit (node_modules/@react-native/babel-plugin-codegen/index.js:169:32)
 at call (node_modules/@babel/traverse/src/visitors.ts:293:14)
 at NodePath.call [as _call] (node_modules/@babel/traverse/src/path/context.ts:35:20)
 at NodePath._call [as call] (node_modules/@babel/traverse/src/path/context.ts:20:17)
 at NodePath.call [as visit] (node_modules/@babel/traverse/src/path/context.ts:112:8)
 at TraversalContext.visit [as visitQueue] (node_modules/@babel/traverse/src/context.ts:147:16)
 at TraversalContext.visitQueue [as visitSingle] (node_modules/@babel/traverse/src/context.ts:108:19)
 at TraversalContext.visitSingle [as visit] (node_modules/@babel/traverse/src/context.ts:179:19)
 at visit (node_modules/@babel/traverse/src/traverse-node.ts:40:17)
 at traverse (node_modules/@babel/traverse/src/index.ts:82:15)
 at transformFile (node_modules/@babel/core/src/transformation/index.ts:124:15)
 at transformFile.next (<anonymous>)
 at transformFile (node_modules/@babel/core/src/transformation/index.ts:48:12)
 at run.next (<anonymous>)
 at transform (node_modules/@babel/core/src/transform.ts:29:20)
 at transform.next (<anonymous>)
 at evaluateSync (node_modules/gensync/index.js:251:28)
 at sync (node_modules/gensync/index.js:89:14)
 at fn (node_modules/@babel/core/src/errors/rewrite-stack-trace.ts:99:14)
 at transformSync (node_modules/@babel/core/src/transform.ts:66:52)
 at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:545:31)
 at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:674:40)
 at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:726:19)
 at Object.require (node_modules/react-native/Libraries/Debugging/DebuggingOverlayNativeComponent.js:11:1)
 at Object.require (node_modules/react-native/Libraries/Debugging/DebuggingOverlay.js:19:1)
 at Object.require (node_modules/react-native/Libraries/ReactNative/AppContainer-dev.js:20:1)
 at Object.require (node_modules/react-native/Libraries/ReactNative/AppContainer.js:27:5)
 at Object.require (node_modules/react-native/Libraries/Modal/Modal.js:24:22)
 at requireActual (node_modules/react-native/jest/mockComponent.js:15:12)
 at mockComponent (node_modules/react-native/jest/setup.js:138:27)
 at Object.require [as Modal] (node_modules/react-native/index.js:138:12)
 at Object.Modal (__tests__/App.test.tsx:20:20)

Reproducer

https://github.com/mdjastrzebski/rn-74-modal-repro

Screenshots and Videos

No response

[mdjastrzebski]

Update:
Also fails with the same error when running on Android Emulator:

error: node_modules/react-native/src/private/specs/components/DebuggingOverlayNativeComponent.js: /Users/maciej/Development/OpenSource/Temp/rn-74-modal-repro/ReproducerApp/node_modules/react-native/src/private/specs/components/DebuggingOverlayNativeComponent.js: Unsupported param type for method "highlightTraceUpdates", param "updates". Found $ReadOnlyArray

[mdjastrzebski]

The same error also occurs on iOS simu:

error: node_modules/react-native/src/private/specs/components/DebuggingOverlayNativeComponent.js: /Users/maciej/Development/OpenSource/Temp/rn-74-modal-repro/ReproducerApp/node_modules/react-native/src/private/specs/components/DebuggingOverlayNativeComponent.js: Unsupported param type for method "highlightTraceUpdates", param "updates". Found $ReadOnlyArray

[mdjastrzebski]

I've located the nightly that broke that code (at least under Test Renderer):

• 0.74.0-nightly-20231108-05d92bf2a - good
• 0.74.0-nightly-20231109-9320174df - bad

[hoxyq]

Thanks for reporting this, looking into this now.

The error

.../node_modules/react-native/src/private/specs/components/DebuggingOverlayNativeComponent.js: Unsupported param type for method "highlightTraceUpdates", param "updates". Found $ReadOnlyArray

Can be fixed by updating @react-native/babel-preset to match the same minor version with react-native. Updating it to 0.74-stable worked for me.

Will publish a small PR to fix the second error tomorrow:

Invariant Violation: getInspectorDataForViewAtPoint should not be used if React DevTools hook is not injected