Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from` on `export * as default from './Animated';`

[tomekzaw]

Description

Starting from Reanimated 2.9.0, if you forget to add Reanimated's Babel plugin, instead of a user-friendly error message, the following error will appear:

error: node_modules/react-native-reanimated/src/index.ts: /Users/tomekzaw/RNOS/Issue3397/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 |

Android	iOS

Solution

1. Add Reanimated's babel plugin to your babel.config.js:

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

2. Clear application cache (depending on your workflow or favourite package manager):

• yarn start --reset-cache
• OR: npm start -- --reset-cache
• OR: expo start -c

3. Reload app

See installation docs for more details.

Disclaimer

Obviously, we need to restore the original user-friendly error message:

• Update plugin error message #3437

[DiyarYelbaka]

Bro you saved my life ! Thank you :)

[justindc100]

Thank you for this! was about to pull my hair out

[PerryRylance]

Brilliant, thanks folks

[jdc0092]

Hello friend, it works quite well for me. Thank you for your contribution and help, greetings! 👍