32

I get the following error when I want to build my APK.

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

enter image description here

I need to say that I have imported react-native-gesture-handler in the index.js

and this is my index.js

import 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';
import App from './app/App';
import {name as appName} from './app.json';

import { LogBox } from 'react-native';
LogBox.ignoreAllLogs();


AppRegistry.registerComponent(appName, () => App);

during development mode, I did not get that error.

this is my package.json

{
  "name": "blackout",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.17.6",
    "@react-native-community/geolocation": "^2.1.0",
    "@react-native-community/netinfo": "^9.0.0",
    "@react-native-community/viewpager": "^5.0.11",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "@react-navigation/stack": "^6.2.1",
    "axios": "^0.27.2",
    "es6-template-strings": "^2.0.1",
    "jalali-moment": "^3.3.11",
    "jwt-decode": "^3.1.2",
    "react": "17.0.2",
    "react-hook-form": "^7.32.2",
    "react-native": "0.68.2",
    "react-native-android-open-settings": "^1.3.0",
    "react-native-audio-recorder-player": "^3.5.1",
    "react-native-device-info": "^9.0.2",
    "react-native-element-dropdown": "^2.0.0",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.4.2",
    "react-native-image-crop-picker": "^0.37.3",
    "react-native-image-picker": "^4.8.4",
    "react-native-modal": "^13.0.1",
    "react-native-reanimated": "^2.9.1",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.13.1",
    "react-native-size-matters": "^0.4.0",
    "react-native-snackbar": "^2.4.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^9.1.0",
    "react-native-video": "^5.2.0",
    "react-native-webview": "^11.22.2",
    "react-redux": "^8.0.2",
    "realm": "10.19.5",
    "redux": "^4.2.0",
    "redux-thunk": "^2.4.1",
    "rn-fetch-blob": "^0.12.0"
  },
  "devDependencies": {
    "@babel/code-frame": "^7.16.7",
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.67.0",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

I really appreciate any help you can provide.

Aazam Heidari
  • 447
  • 1
  • 5
  • 12

6 Answers6

70

You have to add the 'react-native-reanimated/plugin' to the plugins array. make sure this Plugin should be the last.

open the babel.config.js in the root of your project and modify it as follow:

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

NOTE: After adding the react-native-reanimated/plugin to your project you may encounter a false-positive "Reanimated 2 failed to create a worklet" error. In most cases, this can be fixed by cleaning the application's cache. Depending on your workflow or favourite package manager that could be done by:

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

For more information

Abolfazl Roshanzamir
  • 12,730
  • 5
  • 63
  • 79
10

Your babel.config.js should look like

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};
Soumik Chakraborty
  • 205
  • 2
  • 5
5

It seems like there was a breaking change between react-native-reanimated 2.9 and 2.12. The latest version doesn't have a reference to @babel/plugin-proposal-export-namespace-from anymore. To solve this I followed examples I found in this commit.

Add this to babel.config.js:

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

Then run these commands:

yarn add @babel/plugin-proposal-export-namespace-from
yarn start -c
Trevor Allred
  • 888
  • 2
  • 13
  • 22
1

If you have an Expo managed project, your babel.config.js should be looking like this:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      "react-native-reanimated/plugin", // This line.
    ],
  };
};
Platinum
  • 68
  • 10
questerstudios
  • 111
  • 1
  • 6
1

Another possible way is to change ts version to "ES2020" in tsconfig.json.

https://babeljs.io/docs/en/babel-plugin-proposal-export-namespace-from

lahsuk
  • 1,134
  • 9
  • 20
1

Run these command yarn add @babel/plugin-proposal-export-namespace-from -D

Then add the item "'@babel/plugin-proposal-export-namespace-from'" in the plugins array of your babel.config.js file

Example of my babel.config.js:

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