Recently while trying to code in React, I was trying to build an apk; I got an unexpected error, Export namespace should be first transformed by @babel/plugin-proposal-export-namespace-from. Here is the snippet of the error I got
Export namespace should be first transformed by @babel/plugin-proposal-export-namespace-fromI would like to share the steps that helped me to fix the Export namespace should be first transformed by @babel/plugin-proposal-export-namespace-from error.
Why the Export namespace should be first transformed by @babel/plugin-proposal-export-namespace-from error is seen ?
The Export namespace should be first transformed by @babel/plugin-proposal-export-namespace-from error is seen because you must not have added the plugin named 'react-native-reanimated/plugin' to your plugins array.
When you add this plugin you have to ensure that the above Plugin should be the last. Your babel.config.js configuration should be appropriate. If it is not it could cause the above error.
A detailed solution to understand the Export namespace should be first transformed by @babel/plugin-proposal-export-namespace-from error is provided below:
How to fix the Export namespace should be first transformed by @babel/plugin-proposal-export-namespace-from error?
A simple and optimal solution is to, add the plugin named 'react-native-reanimated/plugin' to your plugins array. When you add this plugin, you have to ensure that the above Plugin should be the last. You will also have to update your babel.config.js code to fix the above error.
To fix and the Export namespace should be first transformed by @babel/plugin-proposal-export-namespace-from error; you will have to follow the below-mentioned steps.
First you have to add the plugin named 'react-native-reanimated/plugin' to your plugins array. When you add this plugin, you have to ensure that the above Plugin should be the last.
You will also have to change your babel.config.js in the root directory in your project file and change it with the below-mentioned code.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
...
'react-native-reanimated/plugin', // This line.
],
};
when you are done with adding the plugin react-native-reanimated/plugin in your project, it is likely that it will throw a false-positive “Reanimated 2 failed to create a worklet” error.
This is fixed in most cases by clearing the cache of the application. Depending on how you work this clearance of cache could be done by following the below-mentioned code:
yarn start --reset-cache
npm start -- --reset-cache
expo start -c
Conclusion
To fix the Export namespace should be first transformed by @babel/plugin-proposal-export-namespace-from error; you would have to add the plugin named 'react-native-reanimated/plugin' to your plugins array.
When you add this plugin, you have to ensure that the above Plugin should be the last. You will also have to update your babel.config.js code to fix the above error