react-native-dotenv

react-native-dotenv copied to clipboard

error: bundling failed: Error: Unable to resolve module `path` from 
`/Users/realtebo/Documents/myApp/node_modules/react-native-dotenv/index.js`: 
Module `path` does not exist in the Haste module map

I got the above error after adding react-native-dotenv to my project when I run react-native run-ios

Some info about my software context:

macOS 10.13.4 nodeJs v8.11.1 npm 5.6.0 react-native-cli: 2.0.1 react-native: 0.55.2

This my package.json sections about deps

  "dependencies": {
    "lodash": "^4.17.5",
    "native-base": "^2.4.2",
    "react": "16.3.1",
    "react-native": "^0.55.2",
    "react-native-device-info": "^0.21.5",
    "react-native-navigation": "^1.1.443",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-jest": "22.4.3",
    "babel-preset-react-native": "4.0.0",
    "eslint": "^4.19.1",
    "jest": "22.4.3",
    "react-native-dotenv": "^0.1.1",
    "react-test-renderer": "16.3.1"
  },

I already tried a brutal cleaning of my project

watchman watch-del-all  
rm -rf ~/.npm 
rm -rf ios/build 
rm -rf /tmp/metro-bundler-cache-* 
rm -rf /tmp/haste-map-react-native-packager-* 
rm -rf $TMPDIR/react-* 
rm -rf node_modules 
npm install

...but without success

Same here. Any updates from your side?

How do you import environment variables in your apps? I had the same issue and resolved it by adding react-native-dotenv plugin to .babelrc and importing vars via:

import { VAR1, VAR2 } from 'react-native-dotenv';

instead of

import * from 'react-native-dotenv';

I'm using the first syntax

import { VAR1, VAR2 } from 'react-native-dotenv';

I had similar problem - what helped was running npm start -- --reset-cache command.

I'm running into this too, specifically from an expo setup. Not sure what exactly is happening, but it looks like the plugin isn't getting run so it doesn't bother removing the imports and then they are processed by the bundler which complains because react-native-dotenv pulls in path which isn't availble for react-native. No clue why the plugin isn't getting run though.

My issue was related to using a transformer in the app.json (typescript). This transformer was altering the source before the plugin had a chance to swap in the env values. Easy work around, just create an env.js that imports all your env vars and then re-exports them (you'll also want an env.d.ts to define the shape).

// env.js
import { TEST } from 'react-native-dotenv';

export const env = {
  TEST: TEST,
};

// env.d.ts
export interface Env {
  TEST: string;
}

export const env: Partial<Env>;

@patsissons for me your solution from here https://github.com/istanbuljs/babel-plugin-istanbul/issues/116#issuecomment-385741823 did it (thanks! 👍). i hope though, this is just a temporary fix.

make sure you have .env file created and variables are initiated.

Thank you @patsissons !

My issue was that I was operating in a different branch and had forgotten to add "react-native-dotenv" to my .babelrc presets. Your .babelrc presets should look like this: "presets": ["babel-preset-expo", "react-native-dotenv"],

Hope this helps someone!

From RN 0.56+ the .babelrc presets should have the "module" key: "presets": [ "react-native", "module:react-native-dotenv" ]

Any updates on this? I'm trying to upgrade to RN 0.56 but get the same error message when building. I've also added the module prefix in .babelrc but with no success.

I'm getting this error with firebase-functions...Pat, can you fill in the blanks on your instructions for somebody who really doesn't understand what's happening?

sometimes when u import something, it automatically imports some other excessive modules like import Path from ... , take a look if it has happened to ur project

I had similar problem - what helped was running npm start -- --reset-cache command.

got the same problem resolved it with your help,thank you

Seeing this issue when upgrading to RN 0.57. I've tried all suggestions and nothing worked for me. In the end I switched to react-native-config, it's slightly more annoying to setup but it works with the same .env files

on RN 0.57.1 same issue

its fixed by this https://github.com/jquense/yup/issues/216#issuecomment-389789014

@sovanndyul thank you! npm add @babel/runtime work for me.

@sovanndyul I've tried everything including npm add @babel/runtime but still doesn't work. My path that says doesn't exist is from a component that I created inside a components folder. Like so: error: bundling failed: Error: Unable to resolve module pathfrom/Users/iCortehz/Documents/React-Native/albums/src/components/header.js: Module path does not exist in the Haste module map

use ./path instead of path solved my problem

Removing node_modules and re-adding didn't work for me.

BUT as crazy as it sounds, restarting the computer worked! Who knows what it was that actually needed stopping and re-starting, but if you're stuck with this issue, worth a go 👊

npm install --save path fixed it for me on Android.

@maxbeech's tip worked for me!

@xlyasdasd's solution worked for me. If you are trying to import another component from same directory use import Component './filename'; instead of import Component 'filename';

same error here. cannot resolve .

same with me on RN version 0.57+

I had similar problem - what helped was running npm start -- --reset-cache command.

If you use yarn, write yarn instead of npm

It seems that what is needed to be cleaned depends on the react-native bundler version.

So if cache is the case you can try:

• on macOS: rm -rf $TMPDIR/haste-map-* rm -rf $TMPDIR/metro-cache-*

• on Windows: remove haste-map-* cache files in the C:\Users{User}\AppData\Local\Temp folder

For production build --reset-cache flag can be used, i.e: react-native bundle --reset-cache

when you're using typescript, and you're using react-native-typescript-transformer you were asked to add

  transformer: {
    babelTransformerPath: require.resolve('react-native-typescript-transformer'),
  },

and if you want to use this component with the latest RN (0.57.8) you should not have a .babelrc but a babel.config.js instead that container

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

and then use @patsissons solution

that worked for me