react-native-dotenv: api.addExternalDependency is not a function

After more than a year, I am now getting an error when I run $NODE_ENV=development expo start --web

The error is: Uncaught Error: Module build failed (from ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js): TypeError: [BABEL] ./node_modules/@expo/webpack-config/node_modules/react-dev-utils/webpackHotDevClient.js: api.addExternalDependency is not a function

To Reproduce This is my babel.config.js:

module.exports = (api) => {
    api.cache(true);
    return {
        presets: ['babel-preset-expo'],
        plugins: [
            ['module:react-native-dotenv'],
            'react-native-reanimated/plugin',
        ]
    };
}

my dependencies:

  "dependencies": {
    "@apollo/client": "^3.6.0-beta.5",
    "@expo-google-fonts/lato": "^0.2.2",
    "@expo/config-plugins": "^5.0.0",
    "@expo/dev-server": "^0.1.123",
    "@expo/match-media": "^0.3.0",
    "@formatjs/intl-datetimeformat": "^4.5.1",
    "@formatjs/intl-displaynames": "^5.4.1",
    "@formatjs/intl-getcanonicallocales": "^1.9.0",
    "@formatjs/intl-listformat": "^6.5.1",
    "@formatjs/intl-locale": "^2.4.44",
    "@formatjs/intl-numberformat": "^7.4.1",
    "@formatjs/intl-pluralrules": "^4.3.1",
    "@formatjs/intl-relativetimeformat": "^9.5.1",
    "@mdi/js": "^6.9.96",
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "@react-navigation/stack": "^6.1.1",
    "@stripe/react-stripe-js": "^1.10.0",
    "@stripe/stripe-js": "^1.34.0",
    "@stripe/stripe-react-native": "0.19.0",
    "@types/react": "^18.0.20",
    "@types/react-native": "~0.70.6",
    "apollo-link": "^1.2.14",
    "apollo-link-error": "^1.1.13",
    "apollo-link-timeout": "^4.0.0",
    "apollo-upload-client": "^16.0.0",
    "async": "^3.2.4",
    "async-csv": "^2.1.3",
    "async-json2csv": "^1.0.4",
    "base-64": "^1.0.0",
    "csv": "^6.2.0",
    "deprecated-react-native-prop-types": "^2.3.0",
    "detox-expo-helpers": "^0.6.0",
    "dotenv": "^16.0.3",
    "eas-cli": "^2.3.0",
    "emoji-picker-react": "^4.4.4",
    "expo": "~47.0.3",
    "expo-application": "~5.0.1",
    "expo-asset": "~8.6.1",
    "expo-constants": "~14.0.2",
    "expo-credit-card": "^0.0.5",
    "expo-dev-client": "~2.0.0",
    "expo-device": "~5.0.0",
    "expo-document-picker": "~11.0.1",
    "expo-file-system": "~15.1.1",
    "expo-font": "~11.0.1",
    "expo-intent-launcher": "~10.3.0",
    "expo-linking": "~3.2.2",
    "expo-localization": "~14.0.0",
    "expo-modules-core": "~1.0.2",
    "expo-notifications": "~0.17.0",
    "expo-screen-orientation": "~5.0.1",
    "expo-secure-store": "~12.0.0",
    "expo-sharing": "~11.0.1",
    "expo-splash-screen": "~0.17.4",
    "expo-status-bar": "~1.4.2",
    "expo-updates": "~0.15.4",
    "expo-web-browser": "~12.0.0",
    "file-saver": "^2.0.5",
    "firebase": "^9.6.10",
    "graphql": "^15.5.1",
    "graphql-tag": "^2.12.5",
    "graphql-ws": "^5.6.4",
    "jest": "^26.6.3",
    "lodash": "^4.17.21",
    "metro-config": "^0.67.0",
    "moment": "^2.29.3",
    "parsecurrency": "^1.0.1",
    "patch-package": "^6.4.7",
    "postinstall-postinstall": "^2.1.0",
    "prop-types": "^15.7.2",
    "react": "18.1.0",
    "react-apollo-network-status": "^5.1.0",
    "react-currency-format": "^1.1.0",
    "react-dev-utils": "^12.0.1",
    "react-devtools-core": "^4.26.0",
    "react-dom": "18.1.0",
    "react-error-overlay": "^6.0.11",
    "react-hook-form": "^7.10.1",
    "react-moment": "^1.1.1",
    "react-native": "0.70.5",
    "react-native-animation-library": "^0.0.8",
    "react-native-app-link": "^1.0.1",
    "react-native-autocomplete-dropdown": "^1.1.5",
    "react-native-emoji-selector": "^0.2.0",
    "react-native-error-boundary": "^1.1.12",
    "react-native-flash-message": "^0.1.23",
    "react-native-format-currency": "^0.0.3",
    "react-native-gesture-handler": "~2.8.0",
    "react-native-get-random-values": "^1.8.0",
    "react-native-global-state-hooks": "^1.1.6",
    "react-native-google-places-autocomplete": "^2.4.1",
    "react-native-hyperlink": "^0.0.22",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-mime-types": "^2.3.0",
    "react-native-pager-view": "6.0.1",
    "react-native-paper": "^4.12.1",
    "react-native-paper-dates": "^0.4.6",
    "react-native-paper-dropdown": "^1.0.7",
    "react-native-paper-form-builder": "^2.1.2",
    "react-native-paper-tabs": "^0.7.0",
    "react-native-ratings": "^8.1.0",
    "react-native-reanimated": "~2.12.0",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-svg": "13.4.0",
    "react-native-uuid": "^2.0.1",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "~0.18.7",
    "react-responsive": "^9.0.0-beta.6",
    "react-usestateref": "^1.0.8",
    "rn-emoji-keyboard": "^0.7.1",
    "sentry-expo": "^5.0.3",
    "standard-version": "^9.5.0",
    "standard-version-expo": "^1.0.3",
    "uuidv4": "^6.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/eslint-parser": "^7.19.1",
    "@expo/ngrok": "^4.1.0",
    "@expo/webpack-config": "~0.16.21",
    "@graphql-eslint/eslint-plugin": "^3.7.0",
    "@react-native-community/eslint-config": "^3.0.1",
    "babel-eslint": "^10.1.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
    "babel-preset-expo": "^9.2.2",
    "detox": "^18.20.0",
    "enzyme": "^3.11.0",
    "eslint": "^8.11.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-detox": "^1.0.0",
    "eslint-plugin-flowtype": "8.0.3",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.3.0",
    "eslint-plugin-react-native": "^4.0.0",
    "expo-detox-hook": "*",
    "jest-circus": "^27.0.6",
    "jest-expo": "^45.0.0",
    "prettier": "^2.5.1",
    "react-native-testing-library": "^6.0.0",
    "react-test-renderer": "17",
    "selenium-webdriver": "^4.4.0"
  },

Expected behavior To add my environment variables from my .env file.

Desktop (please complete the following information):

OS: mac osx 13.0
Browser firefox and chrome

Additional context I have cleared my cache, as other articles have suggested. But no love.

IssueHunt Summary

Backers (Total: $7.00)

dk253 ($5.00)
joseph-the-dreamer ($2.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

Checkout the Issuehunt explorer to discover more funded issues.
Need some help from other developers? Add your repositories on IssueHunt to raise funds.

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 27 (12 by maintainers)

Most upvoted comments

are you open to testing something before I push it to the library? can you try adding in your package.json:

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

We’re having an issue because this PR is holding it back, so for now we may need to add the above https://github.com/expo/expo-cli/pull/4593

goatandsheep on Dec 7, 2022

I have been testing things all weekend to get this fix out but because the versions don’t use ~ or ^ and yarn hasn’t implemented override, I cannot do it from the library side. I did a lot of research.

I will try however to keep pestering the expo team to merge the current pr https://github.com/expo/expo-cli/pull/4593

goatandsheep on Dec 5, 2022

This is also happening on metro with jest - but all I had to do was update the package.json versions of babel to

"devDependencies": {
	"@babel/core": "^7.20.2",
	"@babel/runtime": "^7.20.1",

(…)

christopherbauer on Dec 7, 2022

Naturally, as soon as I post the question, my continued finagling seems to have gotten things to work 😃

In case it helps others, I kept finagling my app to look closer and closer to the expo example provided here: https://github.com/goatandsheep/react-native-dotenv-expo-test

The more notable things I did, but unclear which solved the issue:

Instead of adding the peerDependencies section to my package.json, I changed that heading to resolutions
I moved react-native-dotenv from a dependency to a devDependency
The plugins array for my babel.config.js looks like this:

        plugins: [
            [
                'module:react-native-dotenv',
                {
                  moduleName: 'react-native-dotenv',
                  verbose: true,
                },
              ],
        ],

And in a file, I’m importing via import { BACKEND_SERVER_URL } from "react-native-dotenv" and just using BACKEND_SERVER_URL plain, as if it were a variable, in the code. Note that VSCode is complaining that the module has no exported member called BACKEND_SERVER_URL, but it all works in the end.

(Thank you @goatandsheep for that Expo example repo!)

ajyang818 on Jan 22, 2023

HM… those were the versions recommended by the Babel maintainers I worked with on this feature. This library is one of the first to use this feature. when this is all resolved I’ll contribute what was learned to other Babel/ dotenv libs.

I’ll try the 7.x.x version today and if we still have concerns/issues in testing I might have to do the 8.x later🤞

goatandsheep on Dec 1, 2022

Huge! Spent a long time tracking this. Thanks for your answer. Works all the way through.

dk253 on Nov 9, 2022

@goatandsheep woohoo! That did it on my local machine. Now I’ll test with github actions.

dk253 on Nov 9, 2022

@dk253 has funded $5.00 to this issue.

Submit pull request via IssueHunt to receive this reward.
Want to contribute? Chip in to this issue via IssueHunt.
Checkout the IssueHunt Issue Explorer to see more funded issues.
Need help from developers? Add your repository on IssueHunt to raise funds.

issuehunt-oss[bot] on Nov 9, 2022