React-native: [Error: TransformError App.js: [BABEL]

[NoumanSakhawat]

Description:

Error: App.js: [BABEL] /PATH/training/App.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
[Error: TransformError App.js: [BABEL] /PATH/training/App.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.]

React Native version:

System:
OS: macOS 10.15.4
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Memory: 34.62 MB / 8.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.2.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 23, 25, 26, 27, 28, 29
Build Tools: 23.0.1, 26.0.2, 27.0.2, 27.0.3, 28.0.3, 29.0.2, 29.0.3
System Images: android-24 | Google Play Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom_64
Android NDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 11.5/11E608c - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_241 - /usr/bin/javac
Python: 2.7.17 - /usr/local/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.0 => 0.63.0
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

1. Create a project
2. Replace App.js with import React from 'react'; import { Text, View } from 'react-native'; const HelloWorldApp = () => return(<View style={{flex: 1,justifyContent: 'center',alignItems: 'center'}}><Text>Hello, world!</Text></View>);}export default HelloWorldApp;

Error

[xRiot]

Went ahead and upgraded all packages to latest releases in my environment and noticed this error. I reverted sentry-native version 0.63.0 -> 0.62.2 and this error popped up for a different package. I treated that package the same way and to my surprise yet another package complained about this error. This trend continued..

reverted @sentry/react-native: node_modules/@invertase/react-native-apple-authentication/lib/version.js: [BABEL] /Users/admin/Documents/Repositories/react-native-app/node_modules/@invertase/react-native-apple-authentication/lib/version.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
reverted @invertase/react-native-apple-authentication: node_modules/@sentry/browser/dist/integrations/trycatch.js: [BABEL] /Users/admin/Documents/Repositories/react-native-app/node_modules/@sentry/browser/dist/integrations/trycatch.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
reverted i18next:  node_modules/@sentry/browser/dist/version.js: [BABEL] /Users/admin/Documents/Repositories/react-native-app/node_modules/@sentry/browser/dist/version.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
reverted eslint-plugin-react-hooks: node_modules/@sentry/browser/dist/integrations/trycatch.js: [BABEL] /Users/admin/Documents/Repositories/react-native-app/node_modules/@sentry/browser/dist/integrations/trycatch.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
reverted ios-deploy: node_modules/@sentry/browser/dist/integrations/trycatch.js: [BABEL] /Users/admin/Documents/Repositories/react-native-app/node_modules/@sentry/browser/dist/integrations/trycatch.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

All in all after my goose chase I was able to pin point this entire issue to react-native-dotenv

Outdated solution

Click here for old solution

This solution might not be universal but I only had to revert react-native-dotenv from 2.2.0 to: 0.2.0 to solve it. Everything else works fine with latest releases at the moment.

Updated solution
Make sure to follow the Migration Guide in react-native-dotenv documentation on how to properly upgrade to latest release. Thanks @goatandsheep for pointing it out.

[PatricioBedregal]

@xRiot solution worked for me too

[NoumanSakhawat]

By removing react-native-dotenv issues resoves

[NoumanSakhawat]

@xRiot thanks

[goatandsheep]

@NoumanSakhawat can you validate this issue again with the new version of react-native-dotenv?

[tomcastro]

@goatandsheep just tried with the latest version and we still have the same problem.

[goatandsheep]

@tomcastro Thank you for validating. Let's continue this conversation on the related ticket https://github.com/goatandsheep/react-native-dotenv/issues/15

[rhaegar453]

Went ahead and upgraded all packages to latest releases in my environment and noticed this error. I reverted sentry-native version 0.63.0 -> 0.62.2 and this error popped up for a different package. I treated that package the same way and to my surprise yet another package complained about this error. This trend continued..

reverted @sentry/react-native: node_modules/@invertase/react-native-apple-authentication/lib/version.js: [BABEL] /Users/admin/Documents/Repositories/react-native-app/node_modules/@invertase/react-native-apple-authentication/lib/version.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
reverted @invertase/react-native-apple-authentication: node_modules/@sentry/browser/dist/integrations/trycatch.js: [BABEL] /Users/admin/Documents/Repositories/react-native-app/node_modules/@sentry/browser/dist/integrations/trycatch.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
reverted i18next:  node_modules/@sentry/browser/dist/version.js: [BABEL] /Users/admin/Documents/Repositories/react-native-app/node_modules/@sentry/browser/dist/version.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
reverted eslint-plugin-react-hooks: node_modules/@sentry/browser/dist/integrations/trycatch.js: [BABEL] /Users/admin/Documents/Repositories/react-native-app/node_modules/@sentry/browser/dist/integrations/trycatch.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
reverted ios-deploy: node_modules/@sentry/browser/dist/integrations/trycatch.js: [BABEL] /Users/admin/Documents/Repositories/react-native-app/node_modules/@sentry/browser/dist/integrations/trycatch.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

All in all after my goose chase I was able to pin point this entire issue to react-native-dotenv, I reverted 2.2.0 to 0.2.0. Everything else works fine with latest releases at the moment.

TL:DR
This solution might not be universal but I only had to reverse react-native-dotenv from 2.2.0 to: 0.2.0 to solve it.

Excellent . This solved the issue. Thanks bud

[goatandsheep]

@rhaegar453 any test evidence?

[JuanYut]

Went ahead and upgraded all packages to latest releases in my environment and noticed this error. I reverted sentry-native version 0.63.0 -> 0.62.2 and this error popped up for a different package. I treated that package the same way and to my surprise yet another package complained about this error. This trend continued..

reverted @sentry/react-native: node_modules/@invertase/react-native-apple-authentication/lib/version.js: [BABEL] /Users/admin/Documents/Repositories/react-native-app/node_modules/@invertase/react-native-apple-authentication/lib/version.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
reverted @invertase/react-native-apple-authentication: node_modules/@sentry/browser/dist/integrations/trycatch.js: [BABEL] /Users/admin/Documents/Repositories/react-native-app/node_modules/@sentry/browser/dist/integrations/trycatch.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
reverted i18next:  node_modules/@sentry/browser/dist/version.js: [BABEL] /Users/admin/Documents/Repositories/react-native-app/node_modules/@sentry/browser/dist/version.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
reverted eslint-plugin-react-hooks: node_modules/@sentry/browser/dist/integrations/trycatch.js: [BABEL] /Users/admin/Documents/Repositories/react-native-app/node_modules/@sentry/browser/dist/integrations/trycatch.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
reverted ios-deploy: node_modules/@sentry/browser/dist/integrations/trycatch.js: [BABEL] /Users/admin/Documents/Repositories/react-native-app/node_modules/@sentry/browser/dist/integrations/trycatch.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

All in all after my goose chase I was able to pin point this entire issue to react-native-dotenv, I reverted 2.2.0 to 0.2.0. Everything else works fine with latest releases at the moment.

Update
There's a new version of react-native-dotenv (2.3.0) which still has this issue.

TL:DR
This solution might not be universal but I only had to reverse react-native-dotenv from 2.2.0 to: 0.2.0 to solve it.

Works for me, thanks!

[goatandsheep]

@JuanYut do you have an example environment where this failed? Such as a snack environment?

[goatandsheep]

Please follow the migration guide for the package. 0.2.0 has some major security issues that are not caught by dependabot and it's going to be deprecated very soon.

[xRiot]

Thanks @goatandsheep, it worked for me. I've updated my original comment.