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

mdjastrzebski · 2024-03-27T14:54:46Z

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

Download repro repo: https://github.com/mdjastrzebski/rn-74-modal-repro/
yarn install
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

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

mdjastrzebski · 2024-03-27T17:54:52Z

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 · 2024-03-27T18:08:26Z

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 · 2024-03-27T18:19:40Z

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 · 2024-03-27T20:42:04Z

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

Summary: # Changelog: [Internal] Fixes facebook#43678. The issue is that once `getInspectorDataForViewAtPoint` is imported, it should throw if RDT global hook was not injected. ReactDevTools overlay imports `getInspectorDataForViewAtPoint`, this is why it did throw in testing environment. ReactDevToolsOverlay JSX-element is already gated with RDT global hook check, adding a deferred import, same as it was already implemented for Inspector. Still unclear to me how this didn't throw all this time while using the Catalyst / RNTester. Differential Revision: D55474774

Summary: Pull Request resolved: #43690 # Changelog: [Internal] Fixes #43678. The issue is that once `getInspectorDataForViewAtPoint` is imported, it should throw if RDT global hook was not injected. ReactDevTools overlay imports `getInspectorDataForViewAtPoint`, this is why it did throw in testing environment. ReactDevToolsOverlay JSX-element is already gated with RDT global hook check, adding a deferred import, same as it was already implemented for Inspector. Still unclear to me how this didn't throw all this time while using the Catalyst / RNTester. Reviewed By: cortinico Differential Revision: D55474774 fbshipit-source-id: 759e5e8227cc7534193e5b95616b6099c15f5cb5

saxxi · 2024-05-03T17:19:59Z

@hoxyq I've tried to match @react-native/babel-preset to react-native (0.74.1) but still get the issue on expo go (works well in web):

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

{
  //...
  "dependencies": {
    "@expo/metro-runtime": "~3.1.3",
    "@react-native/babel-preset": "0.74.1",
    "@react-navigation/native": "^6.1.17",
    "@tamagui/config": "^1.96.0",
    "@tamagui/lucide-icons": "^1.96.0",
    "@tamagui/metro-plugin": "^1.96.0",
    "babel-preset-expo": "^10.0.2",
    "expo": "50.0.17",
    "expo-font": "~11.10.3",
    "expo-linking": "~6.2.2",
    "expo-router": "3.4.8",
    "expo-splash-screen": "0.26.4",
    "expo-status-bar": "~1.11.1",
    "expo-system-ui": "~2.9.4",
    "expo-web-browser": "~12.8.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-helmet-async": "~2.0.4",
    "react-native": "0.74.1",
    "react-native-reanimated": "~3.10.0",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "~3.31.1",
    "react-native-web": "^0.19.11",
    "tamagui": "^1.96.0",
    "typescript": "^5.4.5"
  },
  "devDependencies": {
    "@babel/core": "^7.24.5",
    "@types/react": "~18.3.1"
  },

  "packageManager": "yarn@4.0.2"
}

bitcoinbrisbane · 2024-05-05T23:14:48Z

Getting it again on "react-native": "^0.74.1",

seanwalsh · 2024-05-13T10:39:37Z

I was still getting this error as well. Running npx expo install --check fixed issues I had with dependencies that had invalid package versions.

hoxyq · 2024-05-13T12:40:41Z

Getting it again on "react-native": "^0.74.1",

Looks like some other third-party package depends on a different minor version of @react-native/babel-preset. Try specifying correct version of @react-native/babel-preset via yarn resolutions.

Something like

"resolutions": {
  "@react-native/babel-preset": "^0.74.1"
},

should work

webweaves · 2024-05-18T09:35:24Z

I followed all the instructions on above but nothing worked. I was constantly seeing:

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

To get me back on my feet while the team fix the breaking change I modilfed the file node_modules/react-native/src/private/specs/components/DebuggingOverlayNativeComponent.js and commented out the blocks of code that refer to the problematic methods, firstly comment out all lines in the interface NativeCommands block, secondly comment out the method references in the supportedCommands so you are left with an empty array.

This may not be the best thing to do especially if you rely on these methods but I wasted 3 hours getting this working and was getting desperate. Like I say, this may get you up and running again until the breaking change is fixed.

sergeushenecz · 2024-05-18T11:03:41Z

I have the same problems.

Killian0812 · 2024-05-26T11:07:37Z

I followed all the instructions on above but nothing worked. I was constantly seeing:

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

To get me back on my feet while the team fix the breaking change I modilfed the file node_modules/react-native/src/private/specs/components/DebuggingOverlayNativeComponent.js and commented out the blocks of code that refer to the problematic methods, firstly comment out all lines in the interface NativeCommands block, secondly comment out the method references in the supportedCommands so you are left with an empty array.

This may not be the best thing to do especially if you rely on these methods but I wasted 3 hours getting this working and was getting desperate. Like I say, this may get you up and running again until the breaking change is fixed.

I did this and was able to get things running again, but I wonder if the app still work on production cause I need to submit the app in the next few weeks

jenni-faro · 2024-06-11T12:12:38Z

Is there an estimation about when this issue is fixed? I upgraded to react-native 0.74.2 but getting the same error 😞

hoxyq · 2024-06-11T13:31:13Z

Is there an estimation about when this issue is fixed? I upgraded to react-native 0.74.2 but getting the same error 😞

The version 0.74 was shipped without this error, so it is fixed.

Option 1:

If you are using babel-preset-expo, try upgrading it to the latest version.

Option 2:

Some other third-party package depends on a different minor version of @react-native/babel-preset or @react-native/babel-plugin-codegen in your project. Try specifying correct versions via yarn resolutions.

Something like

"resolutions": {
  "@react-native/babel-preset": "^0.74.1",
  "@react-native/babel-plugin-codegen": "^0.74.1"
},

should work

lavisar · 2024-06-17T10:30:06Z

I have the same issues:

I'm using react-native v0.74
Solved by upgrade @react-native/babel-preset: 0.73.19 -> @react-native/babel-preset: ^0.74.1

mdjastrzebski added the Needs: Triage 🔍 label Mar 27, 2024

github-actions bot added the Component: Modal label Mar 27, 2024

mdjastrzebski mentioned this issue Mar 27, 2024

RN 0.74 breaking testing library callstack/react-native-testing-library#1577

Closed

mdjastrzebski changed the title ~~[0.74-rc.5] Modal component failed to render in tests (under React Test Renderer)~~ [0.74-rc.5] Modal component failed to render in runtime (iOS simu & Android emu) & tests (Test Renderer) Mar 27, 2024

hoxyq self-assigned this Mar 27, 2024

hoxyq mentioned this issue Mar 28, 2024

fix: defer ReactDevToolsOverlay import #43690

Closed

facebook-github-bot closed this as completed in 4841373 Mar 28, 2024

hoxyq mentioned this issue Mar 28, 2024

[0.74] Cherry-pick "fix: defer ReactDevToolsOverlay import" reactwg/react-native-releases#186

Closed

cortinico added Resolution: Fixed A PR that fixes this issue has been merged. and removed Needs: Triage 🔍 labels Mar 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mdjastrzebski commented Mar 27, 2024 •

edited

Loading

mdjastrzebski commented Mar 27, 2024

mdjastrzebski commented Mar 27, 2024

mdjastrzebski commented Mar 27, 2024

hoxyq commented Mar 27, 2024

saxxi commented May 3, 2024

bitcoinbrisbane commented May 5, 2024

seanwalsh commented May 13, 2024

hoxyq commented May 13, 2024

webweaves commented May 18, 2024

sergeushenecz commented May 18, 2024

Killian0812 commented May 26, 2024

jenni-faro commented Jun 11, 2024

hoxyq commented Jun 11, 2024 •

edited

Loading

lavisar commented Jun 17, 2024

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

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

Comments

mdjastrzebski commented Mar 27, 2024 • edited Loading

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of npx react-native info

Stacktrace or Logs

Reproducer

Screenshots and Videos

mdjastrzebski commented Mar 27, 2024

mdjastrzebski commented Mar 27, 2024

mdjastrzebski commented Mar 27, 2024

hoxyq commented Mar 27, 2024

saxxi commented May 3, 2024

bitcoinbrisbane commented May 5, 2024

seanwalsh commented May 13, 2024

hoxyq commented May 13, 2024

webweaves commented May 18, 2024

sergeushenecz commented May 18, 2024

Killian0812 commented May 26, 2024

jenni-faro commented Jun 11, 2024

hoxyq commented Jun 11, 2024 • edited Loading

Option 1:

Option 2:

lavisar commented Jun 17, 2024

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

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

mdjastrzebski commented Mar 27, 2024 •

edited

Loading

Output of `npx react-native info`

hoxyq commented Jun 11, 2024 •

edited

Loading