Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unknown Option error from Babel in React-Native app

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);

like image 850
IbrahimD Avatar asked Oct 06 '20 12:10

IbrahimD


People also ask

How Babel works in react native?

React Native uses Babel to convert React syntax and the newer ES5+ syntax into code that can be run in a JavaScript environment that doesn't support those features. Out of the box Babel doesn't do anything. It basically parses the code and then generates the same code back out again.

Does react use Babel by default?

Create React App apps certainly use Babel, on the default JS template at least. If you're using JSX that will definitely need to be converted to regular JS syntax somehow, but that can also be done by e.g. the TypeScript compiler.

What is Babel in react?

Babel is a very famous transpiler that basically allows us to use future JavaScript in today's browsers. In simple words, it can convert the latest version of JavaScript code into the one that the browser understands.


2 Answers

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

like image 166
IbrahimD Avatar answered Sep 18 '22 14:09

IbrahimD


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"
like image 29
Bilal Abdeen Avatar answered Sep 17 '22 14:09

Bilal Abdeen