Optional chaining babel plugin not being added properly

[habovh]

Do you want to request a feature or report a bug?

Report a bug

What is the current behavior?

@babel/plugin-syntax-optional-chaining seems not being added by metro-react-native-babel-preset to the babel presets properly.

Background and findings so far

This issue https://github.com/facebook/react-native/issues/30581 mentions a runtime error when metro is bundling a react-native app.

The issue can be addressed in two ways:

• patching React Native's LayoutAnimation.js component so it does not use optional chaining operators, as suggested by this comment.
• adding @babel/plugin-syntax-optional-chaining explicitly as a dev dependency and in the project's .barbelrc plugins array.

Pointers

This may have something to do with the way the optional chaining plugin is added in extra plugins, or else it could come from babel ignoring the passthrough syntax plugins since the optional chaining plugin is added in that list too. Or maybe there is some kind of conflict because the plugin is exported twice? Not sure though.

What is the expected behavior?

It is expected that @babel/plugin-syntax-optional-chaining gets properly added to the plugins when using metro-react-native-babel-preset without having to add it manually.

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system. Yarn: 1.22.10 Node: 14.3.0 Metro: 0.64 OS: macOS 11.3

babel/core: 7.12.9 babel/runtime: 7.12.5

[motiz88]

Is this an issue only when upgrading from an earlier version of React Native / Metro, or does this also reproduce when creating a new app based on the latest stable React Native release?