Question 33217 in React native Question posted in
The official React Native documentation can be found here.

React Native—react-native-dotenv error: api.addExternalDependency is not a function

I am using Expo (version: ~47.0.12) with React Native (version: 0.70.5), and I am unable to use the react-native-dotenv npm package. I have followed many tutorials, and they all result in this same error message:

./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")

The tutorials that I have used are basically blogs stating the same information from the docs.

This is my babel.config.js file:

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

I have also tried this in my babel.config.js file:

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

My .env file is the standard .env:

API_KEY='12345'

Here is my import statement to access the variable:

import { API_KEY } from '@env';

Normally in VS Code, when I start typing import { Something } from ', I will normally get suggestions from packages I have installed. That does not happen here when using @env—the suggestion does, however, show up when I import from 'react-native-dotenv', but I still get that same error message.

I’ve read a ton of GitHub issues and am just spinning my wheels at this point.

Tags:

2

Answers


  1. 0

    Im using This Library

    Your Entire Steps is okay you just Missed to create .babelrc file

    Dont change anything in your babel.config.js file,leave it as its

    //.babelrc

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

    once Entire steps is done try to reload server and boom you will see magic>>

    Login or Signup to reply.
  2. 0

    Had the same problem and found a solution here:
    https://github.com/goatandsheep/react-native-dotenv/issues/377#issuecomment-1309452448

    In your package.json, add

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

    if you are using yarn and

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

    if you are using npm. I also had to use

    api.cache(false);

    in my babel.config.js as per the react-native-dotenv docs.
    There are also other solutions in the linked issue that may be better.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search