The package at "node_modules/react-native-dotenv/index.js" attempted to import the Node standard library module "path"

[idandagan1]

While building the js bundle I get:

The package at "node_modules/react-native-dotenv/index.js" attempted to import the Node standard library module "path". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq/#can-i-use-nodejs-packages-with-expo

My versions: node: 10.16 npm: 6.9 expo: 32.0.6 react-native-dotenv: 0.2.0

I've tried to remove node_modules, cleared cache, restarting the computer, install again. I have the same problem as the stackoverflow question.

This is my babel.config.js:

module.exports = function config(api) {
  api.cache(true);

  return {
    presets: ['babel-preset-expo', 'module:metro-react-native-babel-preset', 'module:react-native-dotenv'],
    plugins: [
      [
        '@babel/plugin-proposal-decorators',
        {
          legacy: true,
        },
      ],
    ],
  };
};

[embray]

Same problem. The package appears to be broken.

This is supposed to work as a babel plugin, so it's only ever run on the development machine, and using the Node.js standard lib is no problem in this case. The way the plugin works is it replaces references to itself within the project (i.e. import 'react-native-dotenv') with something else. However, the replacement is not occurring, so just load the actual module implementing the plugin, which uses the stdlib path module.

I'm not sure how to fix it though. Babel is bewildering to me.

[jbrodriguez]

So, I was giving it some more thought and .. what's the difference between react-native-dotenv and just having an .env (in json format) that you can import

.env

{
  apiKey: 'lorem',
  anotherConfig: 'foobar',
  someConfig: false,
}

then

import env from './.env'

//env = {
//  apiKey: 'lorem',
//  anotherConfig: 'foobar',
//  someConfig: false,
//}

You can get fancy and create separate prod/dev keys, if you want

[embray]

Sure, you can do that. But the problem is that the build toolchain doesn't support dynamic imports, so if I want to have multiple .env files floating around at the same time (e.g. .env.development, .env.staging, .env.production) there needs to be some way to switch which one I want to use at built-time without having to make code changes.

In general I find it rather remarkable that react-native doesn't have official support and recommandations for this kind of essential configuration management....

[davizp]

I have fixed it by installing the missing path package. I hope somebody gets a better solution and let us know.

File Structure:

my-app
  |_ package.json
  |_ babel.config.js:
  |_ config.js:
  |_ .env

My package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "expo": "~36.0.0",
    "path": "^0.12.7",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.10.3"
  },
  "devDependencies": {
    "babel-preset-expo": "~8.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.1",
    "prettier": "1.19.1",
    "react-native-dotenv": "^0.2.0"
  },
  "private": true
}

My babel.config.js:

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

My config.js

import { API_KEY } from 'react-native-dotenv';

export default {
  API_KEY,
};

My .env

API_KEY=example

[mjaferDo]

I had the same problem for my expo project and clearing the npm cache helped.

rm -r node_modules
rm package-lock.json
npm install
expo start
or
npm start

My babel.config.js

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

[adriangc24]

Anything worked for me: The package at "node_modules\react-native-dotenv\index.js" attempted to import the Node standard library module "path". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq/#can-i-use-nodejs-packages-with-expo Failed building JavaScript bundle.

[goatandsheep]

There's a new repo and package babel-plugin-dotenv-import.