React-Native 应用程序中来自 Babel 的未知选项错误
Unknown Option error from Babel in React-Native app
我正在使用 typescript 构建一个 react-native 应用程序以学习 react native。一旦我 运行 带有 expo 的应用程序启动并尝试在模拟器上 运行 我得到这个错误:
index.js: [BABEL] ......../index.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options
其实我之前没有遇到过这个错误。我尝试安装 react-native-dotenv
包,同时也安装了 metro-react-native-babel-preset
,我不确定是否已经安装。
我的package.json如下:
{
"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-dotenv
设置有关。
将 babel.config.js 更改为:
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
}]
]
};
还更改了导入语句:
import {VARIABLE} from "react-native-dotenv"
到:
import {VARIABLE} from "@env"
解决方案的功劳:
https://github.com/facebook/react-native/issues/29314
解决方案:
https://github.com/goatandsheep/react-native-dotenv/wiki/Migration-Guide
我正在使用 expo 构建一个应用程序,但最终遇到了同样的问题。我通过将导入从 'react-native-dotenv'
重命名为 '@env'
来修复此问题,然后将我的 babel.config.js 更改为
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
"module:react-native-dotenv",
]
};
};
我没有用module:metro-react-native-babel-preset
,但如果你用了,那么我认为你需要把babel.config.js改成
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [
"module:react-native-dotenv"
]
};
在这些更改之后,在终端中使用以下命令重置 expo 的缓存。我的只有在这一步之后才能工作。
expo r -c
2022 年(以及下面的版本列表)似乎 babel.config.js
应该只有一个条目用于 react-native
个项目。
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
但是,您需要确保其他与测试相关的设置正确。例如,您需要在项目的根目录中有一个名为 jest.config.js
的文件,该文件应如下所示。或者,您可以将这些设置添加到 package.json
文件。
// 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"
当我们将 React-Native 从 0.63.1 更新到 0.67.3 时,我的团队发生了这种情况,最终解决方案是删除 node_modules 文件夹并执行 yarn install
再次。不知道为什么会这样,但它对我所有的团队成员(7 人)都有效。
我正在使用 typescript 构建一个 react-native 应用程序以学习 react native。一旦我 运行 带有 expo 的应用程序启动并尝试在模拟器上 运行 我得到这个错误:
index.js: [BABEL] ......../index.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options
其实我之前没有遇到过这个错误。我尝试安装 react-native-dotenv
包,同时也安装了 metro-react-native-babel-preset
,我不确定是否已经安装。
我的package.json如下:
{
"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-dotenv
设置有关。
将 babel.config.js 更改为:
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
}]
]
};
还更改了导入语句:
import {VARIABLE} from "react-native-dotenv"
到:
import {VARIABLE} from "@env"
解决方案的功劳:
https://github.com/facebook/react-native/issues/29314
解决方案:
https://github.com/goatandsheep/react-native-dotenv/wiki/Migration-Guide
我正在使用 expo 构建一个应用程序,但最终遇到了同样的问题。我通过将导入从 'react-native-dotenv'
重命名为 '@env'
来修复此问题,然后将我的 babel.config.js 更改为
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
"module:react-native-dotenv",
]
};
};
我没有用module:metro-react-native-babel-preset
,但如果你用了,那么我认为你需要把babel.config.js改成
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [
"module:react-native-dotenv"
]
};
在这些更改之后,在终端中使用以下命令重置 expo 的缓存。我的只有在这一步之后才能工作。
expo r -c
2022 年(以及下面的版本列表)似乎 babel.config.js
应该只有一个条目用于 react-native
个项目。
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
但是,您需要确保其他与测试相关的设置正确。例如,您需要在项目的根目录中有一个名为 jest.config.js
的文件,该文件应如下所示。或者,您可以将这些设置添加到 package.json
文件。
// 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"
当我们将 React-Native 从 0.63.1 更新到 0.67.3 时,我的团队发生了这种情况,最终解决方案是删除 node_modules 文件夹并执行 yarn install
再次。不知道为什么会这样,但它对我所有的团队成员(7 人)都有效。