export 'default'.'Value' (imported as 'Animated') was not found in 'react-native-reanimated' - 2.10.x

[hsavit1]

Description

Found when upgrading a react native web project's reanimated dep from 2.2.x -> 3.0.0-rc.3

ERROR in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Drawer.js 84:25-39

export 'default'.'Value' (imported as 'Animated') was not found in 'react-native-reanimated' (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent

Steps to reproduce

1. upgrade reanimated from 2.2.x -> 3.0.x
2. use react-navigation with all of the latest versions (drawer v6.5.0)

Snack or a link to a repository

N/A

Reanimated version

2.10.x & up

React Native version

react native web 0.18.9

Platforms

Web

JavaScript runtime

No response

Workflow

No response

Architecture

No response

Build type

No response

Device

No response

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?

[roryabraham]

We're seeing this in version 2.10.x

[ouarrtaha]

the same here with 2.10.x

[adi-gurhan]

node_modules\react-native-reanimated\src\index.ts: Export namespace should be first transformed by @babel/plugin-proposal-export-namespace-from. 5 | export from './reanimated1'; 6 | export from './reanimated2';

7 | export * as default from './Animated';

[adi-gurhan]

solved above went to path and deleted as default export * from './Animated';

[hsavit1]

@adi-gurhan can you create a PR on the reanimated repo with this change?

[jpaas]

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

[hsavit1]

@jpaas which file did you import reanimated into? did you add that into the react-native-reanimated/lib/Animated.js file?

[jpaas]

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

[edkimmel]

After patching index.web.js, the bundle builds but cannot be ran. Adding some console statements to my bundle, it appears that the default export of AnimatedNode is coming up null rather than the class.

TypeError: Super expression must either be null or a function at _inherits (node_modules/@babel/runtime/helpers/inherits.js:5:11) at build/server.js:24259:1507 at Module../node_modules/react-native-reanimated/lib/reanimated1/core/InternalAnimatedValue.js

[jpaas]

I'm having this issue using 2.x. Originally 2.10. Just tried 2.11. Same thing. Is it just not working for web at all any more?

[hsavit1]

@jpaas have you tried 2.12?

[jpaas]

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

[GustavoBonfimS]

Any updates ?

[hsavit1]

still broken when I tried with 3.0.rc5

[ssarnot]

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

2. Add in your babel.config.js:

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

[hsavit1]

@ssarnot this solution appears to eliminate the error in 2.12 but not in 3.0-rc5

[hsavit1]

that being said, even though it renders with no errors, there appears to be a number of breaking changes that make this upgrade non-viable. for example, flex does not seem to work correctly (the rendered content only uses half of the viewport height)

[bryanltobing]

still face the issue in 2.13.0

[gabrielgrover]

Seeing this issue in 2.13.0 as well

[cprentice22]

Seeing the issue in 2.12.0. Is there any fix for this? I tried what the above guy said and it did not work for me.

[jpaas]

I just picked up 2.14.4 and the problem is gone for me

[software-2]

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

[lucksp]

I am seeing this also on "react-native-reanimated": "~2.9.1",

Tried what the docs show:

import Animated from 'react-native-reanimated';

and

import Reanimated from "react-native-reanimated"

both without success

and yes, I do have the babel plugin setting enabled

[pierrybos]

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;`

[Emiliano-OM]

@pierrybos solved?

[djaffer]

It is throwing so many warnings. We cannot disable eslint because of this.

[tworems]

I'm using Expo and I managed to fix it by editing the app.json with:

"web": { "bundler": "metro", "favicon": "./assets/favicon.png" },

Now, with this "bundler" despite the alert being gone, the auto refresh stops on the web and my favicon won't load anymore. So this doesn't really look like a fix.

[hsavit1]

still seeing on 2.17.0

[fukemy]

any solution?

[piaskowyk]

@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.

[fukemy]

@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.

Thanks you

[flyskywhy]

@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%E4%B8%BB%E8%A7%82%E7%9A%84%E4%BD%93%E9%AA%8C%E6%96%B9%E5%BC%8F/t%E5%BF%AB%E4%B9%90%E7%9A%84%E4%BD%93%E9%AA%8C/%E7%94%B5%E4%BF%A1/Tool/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/JavaScript/React%E4%BD%BF%E7%94%A8%E8%AF%A6%E8%A7%A3.md#upgrade-to-react-scripts5-and-add-web-workers-support

[natainditama]

https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/web-support/

[djaffer]

33 warnings what a pain this package is.

[wmonecke]

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

[masudcse9]

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 ????

[Strengthless]

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

[robagi]

that being said, even though it renders with no errors, there appears to be a number of breaking changes that make this upgrade non-viable. for example, flex does not seem to work correctly (the rendered content only uses half of the viewport height)

It is possible to mitigate this behavior by wrapping the App with GestureHandlerRootView as indicated in the documentation https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation/#js but the flex:1 does not cover the full width so I removed it and I have something to work with but I still get the 33 warnings.

` return (

{/* ... */}

);`

Has anyone managed to solve it?

[visitsb]

👎 Confirm the issue continues to happen with expo 49, react-native-reanimated 3.3.0, even with correct setup. Workaround suggested by @Strengthless works 👍 for now to get rid of these warnings.

[paveltretyakovru]

To continue @Strengthless (thanks him) answer. My decision is stupid, but I don't know what can I do with it and I can't share code with warnings with my workers. ... may be only fork, but it's strange too. The js script comment 5 line and insert new export from Strengthless decision

package.json

{
//...
"scripts": {
//...
"postinstall": "node ./scripts/fixReactNativeReanimated.js"
}
//...
}

> scripts/fixReactNativeReanimated.js

```javascript
const fs = require('fs');

const filePath =
  './node_modules/react-native-reanimated/lib/module/index.web.js';

fs.readFile(filePath, 'utf8', (err, data) => {
  if (err) {
    console.error('Error reading file:', err);
    return;
  }

  const exportPattern = /export { _default as default };/g;
  const insertLine = 'export default _default;';

  const modifiedData = data.replace(exportPattern, (match) => {
    if (match === 'export { _default as default };') {
      return `// ${match}\n${insertLine}`;
    }
    return match;
  });

  fs.writeFile(filePath, modifiedData, 'utf8', (err) => {
    if (err) {
      console.error('Error writing file:', err);
      return;
    }
    console.log('File modified successfully!');
  });
});

[Strengthless]

To continue @Strengthless (thanks him) answer. My decision is stupid, but I don't know what can I do with it and I can't share code with warnings with my workers. ... may be only fork, but it's strange too. The js script comment 5 line and insert new export from Strengthless decision

Is there a specific reason as to why you’re writing your own JS script instead of using patch-package?

[paveltretyakovru]

To continue @Strengthless (thanks him) answer. My decision is stupid, but I don't know what can I do with it and I can't share code with warnings with my workers. ... may be only fork, but it's strange too. The js script comment 5 line and insert new export from Strengthless decision

Is there a specific reason as to why you’re writing your own JS script instead of using patch-package?

Wow. Thanks. I don't know about the app

[Erisgreyratboreas2]

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

[djaffer]

Awesome this works. Thanks @Erisgreyratboreas2 for being the savior for the long pending issue!

[CHI-NONSO1]

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

[m-bert]

Hi!

First of all, as @piaskowyk said, you can no longer use Reanimated API v1 in 3.x.

Second of all, this issue originates from react-navigation. Some of the fixes that were proposed (for example in #4524) contain changes inside navigation.

Given that, I'm closing it as it is not caused directly by reanimated.

[melbythomas]

Hi @flyskywhy am facing an issue , i have create a react native ts project in web, trying to run in drwer navigation i got error. and tried above solution doesnt work.

Compiled with problems: × ERROR in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Drawer.js 77:26-40 export 'default'.'Value' (imported as 'Animated') was not found in 'react-native-reanimated' (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent) ERROR in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Drawer.js 78:25-39 export 'default'.'Value' (imported as 'Animated') was not found in 'react-native-reanimated' (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent) ERROR in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Drawer.js 367:42-55 export 'default'.'Code' (imported as 'Animated') was not found in 'react-native-reanimated' (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent) ERROR in ./node_modules/@react-navigation/drawer/lib/module/views/legacy/Drawer.js 371:77-90 export 'default'.'Code' (imported as 'Animated') was not found in 'react-native-reanimated' (possible exports: FlatList, Image, ScrollView, Text, View, addWhitelistedNativeProps, addWhitelistedUIProps, createAnimatedComponent)

Package.json { "name": "onboarding", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest", "web": "react-scripts start" }, "dependencies": { "@expo/vector-icons": "^13.0.0", "@react-native-community/masked-view": "*", "@react-navigation/bottom-tabs": "6.3.1", "@react-navigation/drawer": "6.4.1", "@react-navigation/elements": "1.3.3", "@react-navigation/material-bottom-tabs": "6.2.1", "@react-navigation/material-top-tabs": "6.2.1", "@react-navigation/native": "6.0.10", "@react-navigation/native-stack": "6.6.1", "@react-navigation/stack": "6.2.1", "react": "18.2.0", "react-dom": "^18.2.0", "react-native": "0.73.2", "react-native-gesture-handler": "~2.12.0", "react-native-pager-view": "6.2.0", "react-native-paper": "^4.7.2", "react-native-reanimated": "~3.3.0", "react-native-safe-area-context": "4.6.3", "react-native-screens": "~3.22.0", "react-native-tab-view": "^3.0.0", "react-native-web": "^0.19.10" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.73.19", "@react-native/eslint-config": "0.73.2", "@react-native/metro-config": "0.73.3", "@react-native/typescript-config": "0.73.1", "@types/react": "^18.2.6", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-scripts": "^5.0.1", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack');

module.exports = { entry: ['babel-polyfill', './index.js'], plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: './index.html', }), new webpack.EnvironmentPlugin({JEST_WORKER_ID: null}), new webpack.DefinePlugin({process: {env: {}}}), ], module: { strictExportPresence: false, rules: [ { test: /.(js|jsx)$/, use: { loader: 'babel-loader', options: { presets: [ '@babel/preset-react', {plugins: ['@babel/plugin-proposal-class-properties']}, ], }, }, }, ], }, resolve: { alias: {'react-native$': 'react-native-web'}, extensions: ['.web.js', '.js'], }, }; babel.config.js module.exports = {

presets: [ '@babel/preset-env', '@babel/preset-react', 'babel-preset-react-native-web', ], plugins: [ '@babel/plugin-proposal-export-namespace-from', // 'react-native-reanimated/plugin', ], resolve: { alias: { 'react-native$': 'react-native-web', }, }, };

App.tsx import 'react-native-gesture-handler'; import * as React from 'react'; import {View, Text} from 'react-native'; import {NavigationContainer} from '@react-navigation/native'; import {createDrawerNavigator} from '@react-navigation/drawer';

function Feed() { return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>

Feed Screen

</View>

); }

function Notifications() { return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>

Notifications Screen

</View>

); }

function Profile() { return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>

Profile Screen

</View>

); }

const Drawer = createDrawerNavigator();

function MyDrawer() { return (

); } export default function App() { return ( ); }

[ertemishakk]

@m-bert how is this not related to this package? declarations are missing - when i reverted back to 2.14.4, i can see the declarations for these exist

[mathias-berg]

It is a Babel issue. Make sure you got the correct presets and plugins. Make sure you got the lates react-navigation packages installed. Also make sure you include/exclude the correct packages in Webpack.

Babel:

presets: [ [ '@babel/preset-env', { targets: { electron: '26', }, }, ], '@babel/preset-typescript',

        [
            '@babel/preset-react',
            {
                runtime: 'automatic',
                importSource: 'react',
                development: isDev,
            },
        ],
        [
            '@react-native/babel-preset',
            {
                useTransformReactJSXExperimental: true,
                disableImportExportTransform: false,
            },
        ],
    ],
    plugins: [
        'react-native-web',
        ['@babel/plugin-proposal-object-rest-spread', { loose: false }],
        '@babel/plugin-proposal-export-namespace-from',
        'react-native-reanimated/plugin',
    ],

Webpack (only the babel-loader):

{ test: /.(js|jsx|ts|tsx|mjs)$/, exclude: /node_modules\/(?!(react-native-reanimated|react-native-vector-icons|react-native-gesture-handler|@react-navigation\/)\/)./, use: { loader: 'babel-loader', options: { cacheDirectory: true, babelrc: false, configFile: true, }, }, },

Sorry for the formatting, for some reason I couldn't get it to work with code block here.