It was happened between 2.9.x and 2.10.0 when index files in package was splits into: index.js and index.web.js

I’m using expo 47, react-native 70 and react-native-reanimated 2.12.0 and here are steps to fix this issue:

1. Install this package:

yarn add @babel/plugin-proposal-export-namespace-from

1. Add in your babel.config.js:

module.exports = {
    presets: [
      ...
    ],
    plugins: [
        ...
        '@babel/plugin-proposal-export-namespace-from',
        'react-native-reanimated/plugin',
    ],
};

I have the same problem, im using “react-native-reanimated”: “~2.14.4”,

`WARNING in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Overlay.js:11:4 export ‘default’.‘interpolate’ (imported as ‘Animated’) was not found in ‘react-native-reanimated’ (possible exports: Clock, Code, EasingNode, Extrapolate, FlatList, Image, Node, ScrollView, SpringUtils, Text, Transition, Transitioning, Value, View, abs, acc, acos, adapt, add, addWhitelistedNativeProps, addWhitelistedUIProps, always, and, asin, atan, block, call, ceil, clockRunning, color, concat, cond, cos, createAnimatedComponent, createTransitioningComponent, debug, decay, defined, diff, diffClamp, divide, eq, event, exp, floor, greaterOrEq, greaterThan, interpolateColors, interpolateNode, lessOrEq, lessThan, log, max, min, modulo, multiply, neq, not, onChange, or, pow, proc, round, set, sin, spring, sqrt, startClock, stopClock, sub, tan, timing, useCode, useValue) 9 | cond, 10 | greaterThan,

11 | } = Animated; | ^ 12 | 13 | const interpolate: typeof interpolateNode = 14 | interpolateNode ?? interpolateDeprecated;`

33 warnings what a pain this package is.

export default _default;

This is wonderful even though I was like how do I go about implementing this workaround as the above suggestion was not very clear to me but here is what I did for people like me:

1. I followed the guide to install patch-package here https://www.npmjs.com/package/patch-package
2. went to \node_modules\react-native-reanimated\lib\module\index.web.js
3. Added this line export default _default;
4. commented out this one //export { _default as default };
5. then run npx patch-package react-native-reanimated

Having the same problem on Expo SDK 49 with react-native-reanimated 3.3.0, where our web compiles with 33 warnings.

My workaround using patch-package:

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 b32b01f..9ae625c 100644
--- a/node_modules/react-native-reanimated/lib/module/index.web.js
+++ b/node_modules/react-native-reanimated/lib/module/index.web.js
@@ -2,5 +2,5 @@
 import './reanimated2/js-reanimated/global';
 export * from './reanimated2';
 import * as _default from './Animated';
-export { _default as default }; // 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/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 default _default; // 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/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
 //# sourceMappingURL=index.web.js.map
\ No newline at end of file

WARNING in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Overlay.js:11:4 export ‘default’.‘greaterThan’ (imported as ‘Animated’) was not found in ‘react-native-reanimated’ (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent) 9 | cond, 10 | greaterThan,

11 | } = Animated; | ^ 12 | 13 | const interpolate: typeof interpolateNode = 14 | interpolateNode ?? interpolateDeprecated;

web compiled with 33 warnings

Any solution ???

I’ve tried the suggestion of export * from './Animated'; which allows the babel loader to succeed, but obviously changes the shape of the export. If you’re using react-navigation with useLegacyImplementation, it will throw an error because it no longer passes the check it does to make sure you’re using reanimated 2.

This works though

// tree-shaken side effects
import './reanimated2/js-reanimated/global';
import * as Animated from './Animated'

// @ts-ignore backward compatibility with treeshaking
export * from './reanimated1';
export * from './reanimated2';
export default Animated

Having the same problem on Expo SDK 49 with react-native-reanimated 3.3.0, where our web compiles with 33 warnings.

My workaround using patch-package:

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 b32b01f..9ae625c 100644
--- a/node_modules/react-native-reanimated/lib/module/index.web.js
+++ b/node_modules/react-native-reanimated/lib/module/index.web.js
@@ -2,5 +2,5 @@
 import './reanimated2/js-reanimated/global';
 export * from './reanimated2';
 import * as _default from './Animated';
-export { _default as default }; // 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/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 default _default; // 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/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
 //# sourceMappingURL=index.web.js.map
\ No newline at end of file

Thanks I was able to solve this

We are currently seeing this error with 3.x. Tried the above solution of adding @babel/plugin-proposal-export-namespace-from to babel.config.js with no success.

The only thing it’s complaining about is when importing:

import Animated from 'react-native-reanimated';

but not when doing:

import {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

package.json:

"react-native": "0.72.1",
"react-native-reanimated": "^3.3.0",

info

System:
  OS: macOS 13.0.1
  CPU: (8) arm64 Apple M1 Pro
  Memory: 82.25 MB / 16.00 GB
  Shell:
    version: 5.8.1
    path: /bin/zsh
Binaries:
  Node:
    version: 16.8.0
    path: ~/.nvm/versions/node/v16.8.0/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.yarn/bin/yarn
  npm:
    version: 8.19.2
    path: ~/.nvm/versions/node/v16.8.0/bin/npm
  Watchman:
    version: 2023.04.03.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.1
    path: /Users/wmonecke/.rvm/gems/ruby-2.7.6/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.4
      - iOS 16.4
      - macOS 13.3
      - tvOS 16.4
      - watchOS 9.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2021.3 AI-213.7172.25.2113.9123335
  Xcode:
    version: 14.3.1/14E300c
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 18.0.1.1
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/wmonecke/.rvm/rubies/ruby-2.7.6/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.1
    wanted: 0.72.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true

Still reproducing for me on 2.14.4 with Expo 48.0.6 and React Native Web 0.18.12.

We’re seeing this in version 2.10.x

@hsavit1 , I just fix it 😝

The theory in your export 'default'.'Value' (imported as 'Animated') is same with mine, so the solution should be the same.

Theory

My APP ReactWebNative8Koa just got ERROR in ./node_modules/react-native-tab-view/lib/module/TabBarIndicator.js 25:48-68 export 'default'.'interpolate' (imported as 'Animated') was not found in 'react-native-reanimated' in react-native-web with bundler Webpack 5, but good in react-native with bundler Metro.

The related code in TabBarIndicator.js is

const interpolate = Animated.interpolateNode || Animated.interpolate;

and the code seems no problem if Animated.interpolate is undefined, right?

Then I thought Webpack 5 maybe is too strict than Metro with such undefined.

strict?

With keyword strict, I found https://github.com/facebook/create-react-app/blob/v5.0.0/packages/react-scripts/config/webpack.config.js#L348 as

      strictExportPresence: true,

And patched it in node_modules/react-scripts/config/webpack.config.js to

      strictExportPresence: false,

Now ERROR become WARNING, everything is good.

Solution

Finally I refactor it, not patch in node_modules/react-scripts/config/webpack.config.js, but just add

    config.module.strictExportPresence = false;

in YOUR_APP/config-overrides.js, ref to the commit of APP ReactWebNative8Koa RN 0.63.2 -> 0.70.5: let Web Worker with Support for CRA v5 (and Webpack 5)

PS: installation of react-native-web with react-app-rewired and config-overrides.js can ref to my blog https://github.com/flyskywhy/g/blob/master/i主观的体验方式/t快乐的体验/电信/Tool/编程语言/JavaScript/React使用详解.md#upgrade-to-react-scripts5-and-add-web-workers-support

@fukemy In Reanimated 3 we removed Reanimated API v1. If you want to still use Reanimated v1 API, you need to stay with the 2.x version. But I highly recommended using 3.x version.

still broken when I tried with 3.0.rc5

@hsavit1 Just tried 2.12. Still no different. Doesn’t work with react-native-web.

@hsavit1 That is the node_modules/react-native-reanimated/lib/index.web.js file that I patched