Warnings in console while running web expo

[djaffer]

Description

There are 31 warnings showing for react-native-reanimated/lib/module/index.web.js file not exported correctly. This issue has been consistently overlooked. The exporting is not done properly with react-native-reanimated/lib/module/index.web.js.

 WARNING in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Overlay.js:26
export 'default'.'interpolateNode' (imported as 'Animated') was not found in 'react-native-reanimated' (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent)
  24 | import Animated from 'react-native-reanimated';
  25 | var interpolateDeprecated = Animated.interpolate,
> 26 |   interpolateNode = Animated.interpolateNode,
  27 |   cond = Animated.cond,
  28 |   greaterThan = Animated.greaterThan;
  29 | var interpolate = interpolateNode != null ? interpolateNode : interpolateDeprecated;

WARNING in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Overlay.js:27
export 'default'.'cond' (imported as 'Animated') was not found in 'react-native-reanimated' (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent)
  25 | var interpolateDeprecated = Animated.interpolate,
  26 |   interpolateNode = Animated.interpolateNode,
> 27 |   cond = Animated.cond,
  28 |   greaterThan = Animated.greaterThan;
  29 | var interpolate = interpolateNode != null ? interpolateNode : interpolateDeprecated;
  30 | var PROGRESS_EPSILON = 0.05;

WARNING in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Overlay.js:28
export 'default'.'greaterThan' (imported as 'Animated') was not found in 'react-native-reanimated' (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent)
  26 |   interpolateNode = Animated.interpolateNode,
  27 |   cond = Animated.cond,
> 28 |   greaterThan = Animated.greaterThan;
  29 | var interpolate = interpolateNode != null ? interpolateNode : interpolateDeprecated;
  30 | var PROGRESS_EPSILON = 0.05;
  31 | var Overlay = React.forwardRef(function Overlay(_ref, ref) {

web compiled with 33 warnings

Here is patch that fixes it:

diff --git a/node_modules/react-native-reanimated/lib/module/index.web.js b/node_modules/react-native-reanimated/lib/module/index.web.js
index bba2514..2d6671c 100644
--- a/node_modules/react-native-reanimated/lib/module/index.web.js
+++ b/node_modules/react-native-reanimated/lib/module/index.web.js
@@ -1,5 +1,8 @@
 'use strict';
 
 export * from './reanimated2';
-export * as default from './Animated'; // If this line fails, you probably forgot some installation steps. Check out the installation guide here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started#installation 1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details) 2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache
+// export * as default from './Animated'; // If this line fails, you probably forgot some installation steps. Check out the installation guide here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started#installation 1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details) 2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache
+import * as _default from './Animated';
+export default _default;
 //# sourceMappingURL=index.web.js.map
+

Steps to reproduce

Install fresh 3.10.0 then run expo web.

Snack or a link to a repository

https://snack.expo.io/

Reanimated version

3.10.0

React Native version

0.72.8

Platforms

Web

JavaScript runtime

Hermes

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[tomekzaw]

@djaffer Thanks for reporting this issue as well as submitting a patch.

I'm afraid we can't really replace export * as default from './Animated'; with separate import and export as it breaks tree-shaking.

Also, Reanimated 3 no longer exports interpolateNode, cond, greaterThan etc.

It looks like you might be using an outdated version of @react-navigation/drawer, can you please upgrade to the latest and see it if helps?

[djaffer]

Does it require upgrading to expo 50? I am using "@react-navigation/drawer": "^6.6.15",

[djaffer]

now getting this WARNING in ./node_modules/react-native-reanimated/lib/module/createAnimatedComponent/createAnimatedComponent.js:265 export 'RNRenderer' (imported as 'RNRenderer') was not found in '../platform-specific/RNRenderer' (module has no exports) 263 | viewConfig = null; 264 | } else {

265 | var hostInstance = RNRenderer.findHostInstance_DEPRECATED(component); 266 | if (!hostInstance) { 267 | throw new Error('[Reanimated] Cannot find host instance for this component. Maybe it renders nothing?'); 268 | }