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

编程问答 2022-06-10

问题描述

我正在用打字稿构建一个本机应用程序，以便学习本机响应。一旦我使用expo start运行应用程序并尝试在模拟器上运行，我会收到此错误：

index.js: [BABEL] ......../index.js: UnkNown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more @R_304_4045@ion 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);

解决方法

我正在用 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 r -c
,

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

babeljsjavascriptmetro-bundlerreact-nativetypescripttypescript