Unknown Option error from Babel in React-Native app

Question

I am building a react-native app with typescript in order to learn react native. Once I run the app with expo start and try to run on emulator I get this error:

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

Actually I didn't have this error before. I tried to install react-native-dotenv package and while doing it installed metro-react-native-babel-preset too, which I am not sure whether was already installed or not.

My package.json is as follows:

{
 "name": "mobile-app",
 "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 . --ext .js,.jsx,.ts,.tsx"
 },
 "dependencies": {
   "@react-native-community/async-storage": "^1.12.0",
   "@react-native-community/google-signin": "^4.0.3",
   "@types/axios": "^0.14.0",
   "axios": "^0.20.0",
   "expo": "^38.0.10",
   "react": "16.13.1",
   "react-native": "0.62.2"
 },
 "devDependencies": {
   "@babel/core": "^7.8.4",
   "@babel/runtime": "^7.8.4",
   "@react-native-community/eslint-config": "^1.1.0",
   "@types/jest": "^25.2.3",
   "@types/react-native": "^0.63.2",
   "@types/react-native-dotenv": "^0.2.0",
   "@types/react-test-renderer": "^16.9.2",
   "@typescript-eslint/eslint-plugin": "^2.27.0",
   "@typescript-eslint/parser": "^2.27.0",
   "babel-jest": "^25.1.0",
   "eslint": "^6.5.1",
   "jest": "^25.1.0",
   "react-native-clean-project": "^3.4.0",
   "react-native-dotenv": "^2.4.1",
   "react-test-renderer": "16.13.1",
   "typescript": "^3.8.3"
 },
 "jest": {
   "preset": "react-native",
   "moduleFileExtensions": [
     "ts",
     "tsx",
     "js",
     "jsx",
     "json",
     "node"
   ]
 }
}

babel.config.js :

module.exports = {
  presets: ['module:metro-react-native-babel-preset', 'module:react-native-dotenv'],
};

index.js

/**
 * @format
 */

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

AppRegistry.registerComponent('main', () => App);

Answer 1

Turns out that the issue was related to react-native-dotenv settings. Changed babel.config.js to :

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ["module:react-native-dotenv", {
      "moduleName": "@env",
      "path": ".env",
      "blacklist": null,
      "whitelist": null,
      "safe": false,
      "allowUndefined": true
    }]
  ]
};

Also changed the import statement from: import {VARIABLE} from "react-native-dotenv" to: import {VARIABLE} from "@env"

Credit for the solution:
https://github.com/facebook/react-native/issues/29314
Solution:
https://github.com/goatandsheep/react-native-dotenv/wiki/Migration-Guide

Answer 2

This happened to my team when we updated React-Native from 0.63.1 to 0.67.3, and the solution ended up being to just delete the node_modules folder and do a yarn install again. Not sure why that worked, but it worked for all my team members (7 people).

Answer 3

I was building an app with expo and ended up with same problem. I fixed this by renaming the import from 'react-native-dotenv' to '@env' and then changed my babel.config.js to

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      "module:react-native-dotenv",
    ]
  };
};

I didn't use module:metro-react-native-babel-preset but if you used it, then I think you need to change the babel.config.js to

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    "module:react-native-dotenv"
  ]
};

and after these changes, reset the cache of the expo using the following command in the terminal. Mine worked only after this step.

expo r -c

Answer 4

If someone else having installed Reanimated is still having problems with this error, note that the Plugin for that has to be listed last in babel.config.js according to https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/#babel-plugin

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
        'module:react-native-dotenv',
        'react-native-reanimated/plugin', // THIS HAS TO BE LISTED LAST
    ],
};

Answer 5

In 2022 (and for the versions list below,) it seems that babel.config.js should have only one entry for react-native projects.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'], 
}; 

However, you need to make sure the other testing-related settings are correct. For example, you need to have in the root of your project a file called jest.config.js, which should look something like the following. Alternatively, you can add these settings to package.json file.

// jest.config.js 
module.exports = {
  preset: 'react-native', 
    setupFilesAfterEnv: [
    // 1. specific setup for react-native 
    '@testing-library/jest-native/extend-expect',

    // 2. global setup & mocking for some services: 
    './jest.setup.js',

    // 3. mocking for more services: 
    './__mocks__/react-native-firebase.js',
    "./__mocks__/@react-native-community/google-signin.ts", 
  ],
  // 4. Exclusinons List: 
  transformIgnorePatterns: ["node_modules/(?!((jest-)?react-native|@react-native(-community)?)/)"], 
}

"react-native": "0.66.4"

"@testing-library/react-native": "^9.0.0"
"babel-core": "^7.0.0-bridge.0"
"babel-jest": "^27.4.6"
"jest": "^27.4.7"
"metro-react-native-babel-preset": "^0.66.2"

Answer 6

If someone installed Reanimated, add the given code to the babel.config.js file.

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    "react-native-reanimated/plugin",
    [
      "module:react-native-dotenv",
      {
        moduleName: "@env",
        path: ".env",
        blacklist: null,
        whitelist: null,
        safe: false,
        allowUndefined: true,
      },
    ],
  ],
};

Use .env file like this.

import { BASE_URL } from "@env";