React-Native 应用程序中来自 Babel 的未知选项错误

Posted

技术标签:

【中文标题】React-Native 应用程序中来自 Babel 的未知选项错误【英文标题】:Unknown Option error from Babel in React-Native app 【发布时间】:2021-01-21 07:30:18 【问题描述】:

我正在使用 typescript 构建一个 react-native 应用程序,以便学习 react native。一旦我使用 expo start 运行应用程序并尝试在模拟器上运行,我会收到此错误:

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

【问题讨论】:

【参考方案1】:

原来问题与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

【讨论】:

在需要搜索此错误之前,我查看了迁移指南,但它(也不是自述文件)说需要添加 "moduleName": "@env"。 ***.com/a/65958849/34315 对我来说已经足够了【参考方案2】:

我正在使用 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

【讨论】:

这个以及expo r -c 为我做了。 如何重命名导入?【参考方案3】:

在 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 应用程序中来自 Babel 的未知选项错误的主要内容,如果未能解决你的问题,请参考以下文章

没有收到来自 Flask 后端的 React-Native 前端

波卡链Substrate Grandpa + Babe

在 Substrate 中,Babe、Aura 和 Grandpa 有啥区别

react-native - 图像需要来自 JSON 的本地路径

React-Native:如何在 Airbnb 地图上渲染来自 firebase 的标记列表?

来自带有自签名证书的 https 服务器的 React-native fetch()