React Native—react-native-dotenv 錯誤：api.addExternalDependency 不是 function

Question

我正在使用 Expo（版本：~47.0.12）和 React Native（版本：0.70.5），我無法使用react-native-dotenv npm package。我已經學習了很多教程，它們都導致了這個同樣的錯誤信息：

./node_modules/expo/AppEntry.js
TypeError: [BABEL] /Users/jessicagallagher/projects/sfl/sfl-mobile/node_modules/expo/AppEntry.js: api.addExternalDependency is not a function (While processing: "/Users/jessicagallagher/projects/sfl/sfl-mobile/node_modules/react-native-dotenv/index.js")

我使用的教程基本上是博客，說明文檔中的相同信息。

這是我的babel.config.js文件：

module.exports = function(api) {
  api.cache(false);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['module:react-native-dotenv'],
  };
};

我也在我的babel.config.js文件中嘗試過這個：

"plugins": [
    ["module:react-native-dotenv", {
      "moduleName": "@env",
      "path": ".env",
      "blocklist": null,
      "allowlist": null,
      "safe": false,
      "allowUndefined": true,
    }]
  ]

我的.env文件是標准的.env ：

API_KEY='12345'

這是我訪問變量的導入語句：

import { API_KEY } from '@env';

通常在 VS Code 中，當我開始輸入import { Something } from '時，我通常會從已安裝的包中獲得建議。 使用@env時不會發生這種情況——但是，當我從'react-native-dotenv'導入時，建議會出現，但我仍然收到相同的錯誤消息。

我已經閱讀了大量的 GitHub 期問題，此時我只是在轉動我的輪子。

Answer 1

我正在使用這個庫

您的整個步驟沒問題，您只是錯過了創建.babelrc文件

不要更改babel.config.js文件中的任何內容，將其保留為

 //.babelrc { "plugins": [ ["module:react-native-dotenv", { "envName": "APP_ENV", "moduleName": "@env", "path": ".env", "blocklist": null, "allowlist": null, "verbose": false }] ] }

完成整個步驟后，嘗試重新加載服務器和 boom 你會看到魔法>>

Answer 2

有同樣的問題並在這里找到了解決方案： https://github.com/goatandsheep/react-native-dotenv/issues/377#issuecomment-1309452448

在您的 package.json 中，添加

"resolutions": {
  "@babel/core": "^7.20.2",
  "babel-loader": "^8.3.0"
}

如果您使用紗線和

"overrides": {
  "@babel/core": "^7.20.2",
  "babel-loader": "^8.3.0"
}

如果您使用的是 npm。我還必須使用

api.cache(false);

根據 react-native-dotenv 文檔，在我的 babel.config.js 中。 鏈接問題中還有其他可能更好的解決方案。