Expo web: "export 'requireNativeComponent' was not found in 'react-native-web/dist/index'

[koaladlt]

Describe the bug Every time that I run the app on the web with expo, this error comes in.

To Reproduce Steps to reproduce the behavior if possible, or a link to a reproduction repo:

1. Build your expo app on the web

Expected behavior I need the app to compile, I'm not sure if React-Native-Fast-Image is available for React Native Web. That would not be a problem at first, but this error would not let the app compile.

Screenshots

Dependency versions

• React Native version: 0.64.3
• React version: 17.0.1
• React Native Fast Image version: 8.5.11
• Expo version: 44.0.0

[haveamission]

From what it looks like, it is not available for React Native Web. Maybe some sort of transpiling would work? Alternatively, you could put a wrapper around it that exports for RNW and for RN iOS and Android. I've had to do that for a few packages that weren't supported on either platform.

I do wish there was some sort of automatic option here though - I have a RNW build and was interested in possibly using FastImage for caching.

[koaladlt]

@haveamission Thanks for your answer, your approach looks interesting.

I will try that and let you know here if that worked!

[jesse-savary]

@haveamission @koaladlt Here is a patch I wrote some time ago to do this:

diff --git a/dist/index.js b/dist/index.js
index 1fc0e9d441836b8086119adc56701ac44539df16..1ac9d0ba09e31f840c717aed3c8f6a24194091e4 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/extends';
 import React, { forwardRef, memo } from 'react';
-import { NativeModules, StyleSheet, requireNativeComponent, Image, View } from 'react-native';
+import { NativeModules, StyleSheet, Image, View, Platform } from 'react-native';

 const FastImageViewNativeModule = NativeModules.FastImageView;
 const resizeMode = {
@@ -98,14 +98,21 @@ const styles = StyleSheet.create({
   }
 }); // Types of requireNativeComponent are not correct.

-const FastImageView = requireNativeComponent('FastImageView', FastImage, {
-  nativeOnly: {
-    onFastImageLoadStart: true,
-    onFastImageProgress: true,
-    onFastImageLoad: true,
-    onFastImageError: true,
-    onFastImageLoadEnd: true
-  }
-});
+let FastImageView
+
+if (Platform.OS === 'web') {
+  FastImageView = Image
+} else {
+  const { requireNativeComponent } = require('react-native')
+  FastImageView = requireNativeComponent('FastImageView', FastImage, {
+    nativeOnly: {
+      onFastImageLoadStart: true,
+      onFastImageProgress: true,
+      onFastImageLoad: true,
+      onFastImageError: true,
+      onFastImageLoadEnd: true,
+    },
+  })
+}

 export default FastImage;

[globemediaofficial]

@jesse-savary How do I use this patch? I'm new to React Native and haven't needed to learn this yet.

[adderly]

The patch for the 8.6.3, using the tool patch-package :

https://gist.github.com/adderly/9cf1b5c2d6f51365a870c7ac70388c9a