Error importing LiveStreamView

Live Streaming
1

Hi,
thank for the time and work you put into this project, I really love the product.

I’ve been trying to solve this for a few days.

If I import LivestreamView with:

import { LivestreamView } from '@api.video/react-native-livestream';

I get this error

ERROR in ./node_modules/@api.video/react-native-livestream/lib/module/nativeComponent.js 2:36-58
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, findNodeHandle, processColor, render, unmountComponentAtNode, unstable_createElement, useColorScheme, useLocaleContext, useWindowDimensions)

If I won’t solve it I guess I’ll have to develop the component from scratch.

2

Hi there,

Thanks for writing in.

It looks like you are using the latest version of React Native. I assume that you’ve created your react app with 0.72 version in mind (probably Expo). The React Native Live Stream module is currently compatible only up to 0.69.1 version of React Native.

1 Like
3

Hi Artem,
thanks for your answer.

I was using react native 0.72 version… I created a new react app
Then installed react-native:

npm install react-native@0.69.1 --legacy-peer-deps

Then installed livestream lib:

npm install '@api.video/react-native-livestream' --legacy-peer-deps

Then added script in index.html:

<script src="https://unpkg.com/@api.video/react-native-livestream" defer></script>
<script src="https://unpkg.com/@api.video/video-uploader" defer></script>
<script src="https://unpkg.com/@api.video/player-sdk" defer></script>

but still can’t make it work:

Compiled with problems:
ERROR in ./node_modules/@api.video/react-native-livestream/lib/module/index.js 2:0-57
Module not found: Error: Can't resolve 'react-native' in 'C:\Users\fillt\source\repos\api.vid\node_modules\@api.video\react-native-livestream\lib\module'

ERROR in ./node_modules/@api.video/react-native-livestream/lib/module/nativeComponent.js 1:0-54
Module not found: Error: Can't resolve 'react-native' in 'C:\Users\fillt\source\repos\api.vid\node_modules\@api.video\react-native-livestream\lib\module'

Thank you,
Filippo.

4

I then installed react native web:

npm install react-native-web --legacy-peer-deps

but got the initial error:

ERROR in ./node_modules/@api.video/react-native-livestream/lib/module/nativeComponent.js 2:36-58
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, findNodeHandle, processColor, render, unmountComponentAtNode, unstable_createElement, useColorScheme, useLocaleContext, useWindowDimensions)

Here are my deps:

  "dependencies": {
    "@api.video/react-native-livestream": "^1.2.4",
    "@api.video/video-uploader": "^1.1.6",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "^0.69.12",
    "react-native-web": "^0.19.6",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

:face_with_head_bandage:

5

You will have an issue with legacy dependancies, try to create a new React app with the following command:

$ react-native init projectname --version 0.69.1