جاوااسکریپت - خطای گزینه ناشناخته از Babel در اپلیکیشن React-Native

من در حال ساخت یک برنامه react-native با typescript هستم تا 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);

پاسخ شماره ۱

مشخص شد که مشکل مربوط به تنظیمات 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 را از: 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

پاسخ شماره ۲

من در حال ساخت یک اپ با اکسبو بودم و به همان مشکل برخورد کردم. این مشکل را با تغییر نام ایمپورت از '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