Fix `requireNativeComponent` missing in react-native-web

[mk0116]

OS:

• [ ] Windows
• [X] MacOS
• [ ] Linux

Platform:

• [ ] iOS
• [ ] Android
• [X] Web

SDK:

• [X] @sentry/react-native (>= 1.0.0)
• [ ] react-native-sentry (<= 0.43.2)

SDK version: 5.22.2

react-native version: 0.72.13

react-native-web version: 0.19.10

Are you using Expo?

• [ ] Yes
• [X] No

Are you using sentry.io or on-premise?

• [X] sentry.io (SaaS)
• [ ] on-premise

If you are using sentry.io, please post a link to your issue so we can take a look:

[Link to issue]

Configuration:

(@sentry/react-native)

Sentry.init({
  dsn: Config.SENTRY_DSN,
  tracesSampleRate: 1.0,
});

---

I have the following issue:

[Description]

An error occurs while compiling on react-native-web.

Compiled with problems WARNING in ./node_modules/@sentry/react-native/dist/js/tracing/timetodisplaynative.js 22:14-36 export 'requireNativeComponent' (imported as 'requireNativeComponent') was not found in 'react-native' (possible exports: AccessibilityInfo, ActivityIndicator, Alert, Animated, AppRegistry, AppState, Appearance, BackHandler, Button, CheckBox, Clipboard, DeviceEventEmitter, Dimensions, Easing, FlatList, I18nManager, Image, ImageBackground, InteractionManager, Keyboard, KeyboardAvoidingView, LayoutAnimation, Linking, LogBox, Modal, NativeEventEmitter, NativeModules, PanResponder, Picker, PixelRatio, Platform, Pressable, ProgressBar, RefreshControl, SafeAreaView, ScrollView, SectionList, Share, StatusBar, StyleSheet, Switch, Text, TextInput, Touchable, TouchableHighlight, TouchableNativeFeedback, TouchableOpacity, TouchableWithoutFeedback, UIManager, Vibration, View, VirtualizedList, YellowBox, __esModule, findNodeHandle, processColor, render, unmountComponentAtNode, unstable_createElement, useColorScheme, useLocaleContext, useWindowDimensions)

[krystofwoldrich]

Hi, thank you for the message.

We will remove the import for web builds.

[krystofwoldrich]

Depending on the setup this might lead to a failed build.

• As described in https://github.com/getsentry/sentry-react-native/issues/3829

[undrafted]

Hi @krystofwoldrich is there any workaround for this issue while waiting for the fix?

[dppo]

This can be a temporary fix

diff --git a/dist/js/tracing/timetodisplaynative.js b/dist/js/tracing/timetodisplaynative.js
index 23b433f6956dc03ed3a5ecc84635bb2bfbba03ca..cafd5143f62c4df8fccc512c44257b8207a828f5 100644
--- a/dist/js/tracing/timetodisplaynative.js
+++ b/dist/js/tracing/timetodisplaynative.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { requireNativeComponent, UIManager, View } from 'react-native';
+import { UIManager, View } from 'react-native';
 const RNSentryOnDrawReporterClass = 'RNSentryOnDrawReporter';
 export const nativeComponentExists = UIManager.hasViewManagerConfig
     ? UIManager.hasViewManagerConfig(RNSentryOnDrawReporterClass)
@@ -19,7 +19,7 @@ let RNSentryOnDrawReporter;
 export const getRNSentryOnDrawReporter = () => {
     if (!RNSentryOnDrawReporter) {
         RNSentryOnDrawReporter = nativeComponentExists
-            ? requireNativeComponent(RNSentryOnDrawReporterClass)
+            ? require('react-native').requireNativeComponent(RNSentryOnDrawReporterClass)
             : RNSentryOnDrawReporterNoop;
     }
     return RNSentryOnDrawReporter;

Is it possible to release a fixed version?

[krystofwoldrich]

Hi @undrafted and @dppo, yes, you can patch the package temporarily.

The patch shared by @dppo will work.

We will try to release a patch shorly.