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);
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.
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.
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.
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
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"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With