Unknown Option error from Babel in React-Native app
Solution 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
Solution 2
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
IbrahimD
Updated on June 12, 2022Comments
-
IbrahimD almost 2 years
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 installedmetro-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);