Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`

[kartikMygoldkart]

Description

After Adding React-native-reanimated getting this error error: node_modules/react-native-reanimated/src/index.ts: /Users/mgk_devops/Desktop/SafariTabsReactNative/SafariTabs/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'; | ^^^^^^^^^^^^ 8 |

Expected behavior

Actual behavior & steps to reproduce

npm i react-native-reanimated import Transitioning from "react-native-reanimated" nix react-native run-android

Package versions

name	version
react-native	0.69.1
react-native-reanimated	2.9.1
NodeJS	v16.14.2
Xcode	13.3
Java	11.0.11
Gradle	7.4.2

Affected platforms

• [x] Android
• [x] iOS
• [ ] Web

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or minimal code example section.

[kartikMygoldkart]

It doesn't requires minimal code because I haven't written any it throws error upon importing the library

[piaskowyk]

Did you add Reanimated Babel plugin? more instructions here - https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation#babel-plugin

[klandell]

I had the same error when upgrading to the latest version. Running yarn start --reset-cache cleared it up for me.

[kartikMygoldkart]

Thanks after adding Babel Plugin and reseting cache its working now

[Yandamuri]

@kartikMygoldkart Still I am facing this issue though I added Babel Plugin and reset cache. This is how my babel.config.js: looks like,

 module.exports = {
 presets: ['module:metro-react-native-babel-preset'],
 plugins: [[
    "babel-plugin-transform-remove-imports",
    {
        "test": [
            'react-toastify', 
            'exceljs', 
            'file-saver', 
        ]
    },
    'react-native-reanimated/plugin'
  ]]
};

Am I missing something here?

[vidkreca-inova]

@Yandamuri I believe you need to move 'react-native-reanimated/plugin' outside the array it's currently in. So put it directly inside the plugins array.

[sbezerrarafa]

@kartikMygoldkart how did you solve

[stage88]

My config looks like this and I get the same error, started happening since moving to RN 0.69.1.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
  env: {
    production: {
      plugins: ['react-native-paper/babel'],
    },
  },
};

[kartikMygoldkart]

@stage88 this is how my babel plugin.js looks like module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ ///This Plugin should be last 'react-native-reanimated/plugin', ], }; also try to clear your cache by running npm start --clear-cache or yarn start --clear-cache

[prasad-11-cairs]

having same issue for me also

error: node_modules/react-native-reanimated/src/index.ts: /Users/cti1050/Documents/React-Native/Projects/MAP-CLIENT-APP/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'; | ^^^^^^^^^^^^ 8 |

[Yandamuri]

@vidkreca-inova Yes, That was the issue. Now it's working well.

[ShinJongUng]

How to fix it?

i have same issue

[stage88]

Using the below command seems to have fixed my issue, thanks @kartikMygoldkart

react-native start --reset-cache

[sbezerrarafa]

someone managed to solve

[Yandamuri]

someone managed to solve

Have you applied above mentioned solutions?

[cyrielo]

How to fix it?

i have same issue

I have exactly this same issue.

My babel config looks like this 👇

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    '@babel/plugin-proposal-export-namespace-from',
    ['babel-plugin-transform-remove-imports', {
      "test": [
          'react-toastify', 
          'exceljs', 
          'file-saver', 
      ]
  },],
  'react-native-reanimated/plugin']
};

[michelorthcba]

this works for me

module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ ... 'react-native-reanimated/plugin', ], };

And

yarn start --reset-cache npm start -- --reset-cache expo start -c

[github-actions[bot]]

Hey! 👋

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

Could you provide a snippet of code, a snack or a link to a GitHub repository that reproduces the problem?

[Mujahid122418]

How to fix it?

i have same issue

I have exactly this same issue.

My babel config looks like this 👇

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    '@babel/plugin-proposal-export-namespace-from',
    ['babel-plugin-transform-remove-imports', {
      "test": [
          'react-toastify', 
          'exceljs', 
          'file-saver', 
      ]
  },],
  'react-native-reanimated/plugin']
};

How to fix it?

i have same issue

I have exactly this same issue.

My babel config looks like this 👇

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    '@babel/plugin-proposal-export-namespace-from',
    ['babel-plugin-transform-remove-imports', {
      "test": [
          'react-toastify', 
          'exceljs', 
          'file-saver', 
      ]
  },],
  'react-native-reanimated/plugin']
};

I have the same issue? how to fix it?

[cyrielo]

Ensure that npx pod-install runs successfully without errors

[ManuDavril31]

this works for me

module.exports = { presets: ['module:metro-react-native-babel-preset'], };

module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], };

[memoray]

this worked for me too (on mac)

module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], };

[DannyPark1]

anyone who couldn't solve this issue even tho after adding 'react-native-reanimated/plugin' as a plugin in babel.config.js?

[xrarberimed]

Even after adding 'react-native-reanimated/plugin' to babel.config.js as a plugin, I couldn't solve this problem.

[udayarajurs]

this worked for me

module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], };

[Abdel-dev1]

dosen't work form me ? any propositions ! module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], };

[dpadula]

I guess that if you are using react-native-paper or another package in babel, the config could be like:

module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], env: { production: { plugins: ['react-native-paper/babel'], }, }, };

[symanhnguyen]

after add react-native-reanimated/plugin, and reset cache using yarn command, i can't fix this bug

[Htoomyat99]

Thank you so much, after adding plugin and clear cache , I can solve this error.

[codefromrvk]

Do not confuse presets with plugins. Create a new field called plugin if its not already there.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

[mamuga]

still doesn't work for me even after adding 'react-native-reanimated/plugin' as a plugin

[codefromrvk]

still doesn't work for me even after adding 'react-native-reanimated/plugin' as a plugin

What version of RN and REA are you using? @mamuga

[flawlessk]

i read all the comments, added plugins of reanimated/plugin in babel, also did reset cache but it's not working, again same error, what should i do in this case?

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

[mary-caraveo]

I had the same problem, but I solved it by performing the following steps:

1. yarn add react-native-reanimated

2. babel.config.js module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], };

3. yarn start --reset-cache

I hope it works for you

[ThugYugi]

Babel.config.js

module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], };

It Works for me

[jroux-git]

I had this issue as well:

When did it occur? After run expo upgrade to expo SDK v46 and related updates and updated to expo cli v6.0.5

What worked for me: updated my babel.config.js as follows: module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], plugins: [ 'react-native-reanimated/plugin' ] }; };

[terriadsit]

Changed Babel.config.js as ThugYugi recommends above,

module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], }; then at command prompt:

expo start -c

as per michelorthcba's suggestion above.

Originally tried these steps on my app and still could not get the drawer to compile. Had to make a complete new app with just the drawer then run the above code.

[lorissikora]

Faced the same issue for my setup using Expo and rnuilib, which depends on react-native-reanimated. It seemed to have been some caching issue which I was only able to clear using expo start --clear.

Source

[mar4elkin]

@dpadula thanks, you saved my day!

[pottercomuneo]

For all the ones like me still struggling after adding the element into the array (babel.config.js) and doing reset-cache, make sure you added the row in the outer array, you may be sure you did but in the end you may just have seen wrong 😁

[Basantmandal32]

@stage88 this is how my babel plugin.js looks like module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ ///This Plugin should be last 'react-native-reanimated/plugin', ], }; also try to clear your cache by running npm start --clear-cache or yarn start --clear-cache

Basant Mandal -this solution work for me

[MehmetKaplan]

Not Working vs Working Configs

Not working

babel.config.js

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ['babel-preset-expo'],
        plugins: ['react-native-reanimated/plugin']
    };
};

Compile Output

mehmetkaplan:example$ expo start --web -c
...
...
Web Bundling complete 7845ms
./node_modules/react-native-animated-layout/node_modules/react-native-reanimated/lib/index.web.js 3:9
Module parse failed: Unexpected token (3:9)
File was processed with these loaders:
 * ../../../../.config/yarn/global/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import "./reanimated2/js-reanimated/global";
| export * from "./reanimated2";
> export * as default from "./Animated";
Started Metro Bundler

Working

babel.config.js

Added '@babel/plugin-proposal-export-namespace-from' into the plugins array, still keeping 'react-native-reanimated/plugin' as the last entry in the array:

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ['babel-preset-expo'],
        plugins: ['@babel/plugin-proposal-export-namespace-from', 'react-native-reanimated/plugin']
    };
};

Compile Output

mehmetkaplan:example$ expo start --web -c
...
Started Metro Bundler
Web Bundling complete 12568ms

Works like charm at this point.

PS: The problem pops every now and then. I am not so sure if npm command lets modifying the babel.config.js file programmatically. But if it is possible, maybe it is better to patch the reanimated2 installation so that it does not need to be done manually.

[jo-joanna]

I guess that if you are using react-native-paper or another package in babel, the config could be like:

module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], env: { production: { plugins: ['react-native-paper/babel'], }, }, };

@dpadula Thanks so much! You're a life saver :D

[adamhari]

I've been struggling with this. I ensured my babel.config.js was proper and that my yarn cache was cleared.

It worked fine locally but failed to build with this error in Github Actions CI/CD, even after disabling the yarn cache from the setup-node action.

Including @babel/plugin-proposal-export-namespace-from caused the build to succeed but masked runtime errors with reanimated which made it unusable.

Downgrading from 2.10.0 to 2.9.1 immediately fixed this issue.

[KristinaHus]

@adamhari In my case, it was completly opposite. As soon as I updated to react-native-reanimated v2.10.0 it started to work. Thanks for pointing to the module version, because as I updated to Expo SDK 46 it automatically installed v2.9.1.

[mvrahas]

I'm using the Expo (v46) managed workflow with a custom dev client. I was seeing an error even after following the steps here to install react-native-reanimated. After rebuilding a new version of the custom dev client using EAS Build, the error disappeared. It could be worth a try for anybody still struggling with this.

[Yevl]

1. Add plugins: ['react-native-reanimated/plugin'] as a plugin
2. yarn add react-native-reanimated
3. yarn -clean

[msaiedimoien]

I had this problem, but I solved it by performing the following steps:

• yarn add react-native-reanimated

• babel.config.js module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], };

• yarn start --reset-cache