Module `path` does not exist in the Haste module map

[realtebo]

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

[Rubenvdveen]

Same here. Any updates from your side?

[valerybugakov]

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';

[realtebo]

I'm using the first syntax

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

[adamivancza]

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

[patsissons]

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.

[patsissons]

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>;

[mxmzb]

@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.

[mohamadswaidan]

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

[Martian2Lee]

Thank you @patsissons !

[sam-warren]

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!

[gluix20]

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

[ewal]

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.

[NicWickman]

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?

[mahgolfa]

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

[eyeamkd]

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

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

[piuccio]

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

[waveChand]

on RN 0.57.1 same issue

[sovanndyul]

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

[aknow2]

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

[cortehz]

@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 modulepathfrom/Users/iCortehz/Documents/React-Native/albums/src/components/header.js: Modulepathdoes not exist in the Haste module map

[xlyasdasd]

use ./path instead of path solved my problem

[maxbeech]

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 👊

[adamyoui]

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

[PrimeTimeTran]

@maxbeech's tip worked for me!

[magna25]

@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';

[geminiyellow]

same error here. cannot resolve .

[jamesmcn1]

same with me on RN version 0.57+

[DylanJu]

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

If you use yarn, write yarn instead of npm

[eugbash]

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

[vincentbriglia]

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

[jamesmcn1]

yes - I fixed in the end by writing a babel.config.js file like this:

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

and running yarn start -- --reset-cache locally (as I installed thru yarn). Make sure you've got the latest babel core, and presets downloaded aswell eg @babel/runtime. (RN 0.57.8, babel 7)

[JaesungNa]

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

it worked for me! thanks :)

[bugsniper]

@xlyasdasd 's solution worked for me.

[MyDinnerIsReady]

@maxbeech Unbelievable! Restart the computer is really work!

[Sbphillips19]

In case some people run into this issue check the file specified. Somehow this randomly gets added sometimes:

import { isAbsolute } from 'path';

Just delete and reset cache and re-run

[te-online]

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 Thanks for this great workaround, when using typescript and react-native-typescript-transformer. However, you missed to explain how this changes the usage of the env variables because of the interface you created:

// App.tsx
...
import { env } from './env';
...

console.log("TEST is", env.TEST);

[patsissons]

I think it may be possible to use export const TEST = TEST but I didn't test it.

[te-online]

I think, what you can do it this:

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

// env.d.ts
export const TEST: string;

// App.tsx
...
import { TEST } from './env';
...

console.log("TEST is", TEST);

[ghost]

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

If you use yarn, write yarn instead of npm

Getting this: error Command failed with exit code 1.

[ghost]

I got this, I was adding some style, then I saved changes and stopped working. Weird for me the fact is trying to resolve ´path´from App.js. I have tried all the solutions of the screenshot. I restarted my iMac and getting the same. You can see all the info on: https://es.stackoverflow.com/questions/263183/failed-to-load-bundle-unable-to-resolve-module-path-module-pathdoes-not-ex

[SeanFelipe]

yarn cache clean fixed the problem for me.

[jako-hub-old]

If someone still has the same error, make sure module:react-native-dotenv is defined in the babel presets. babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset', "module:react-native-dotenv"],
};

[LannyCodes]

use './src/navigate/StackNavigate' instead of 'src/navigate/StackNavigate' works for me !

[CLantigua2]

I did a lot of the steps previously stated but what ultimately got it to work for me was what was suggested by @maxbeech in restarting my machine. It was the last thing I tried because it didn't sound like it would work but it did haha.

[jsina]

as @vincentbriglia said, when you're using typescript and can handle it on babel.config.js here it is:

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    'module:react-native-dotenv',
  ],
};

[CyrusZei]

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

If you use yarn, write yarn instead of npm

that fixed it for me

[elektronik2k5]

I faced the same issue when trying to export { ENDPOINT_URL } from 'react-native-dotenv' in a TS project. The ugly workaround is:

import { ENDPOINT_URL as DOTENV_ENDPOINT_URL } from 'react-native-dotenv'

export const ENDPOINT_URL = DOTENV_ENDPOINT_URL

:man_facepalming:

[Alertis]

I faced the same issue when trying to export { ENDPOINT_URL } from 'react-native-dotenv' in a TS project. The ugly workaround is:

import { ENDPOINT_URL as DOTENV_ENDPOINT_URL } from 'react-native-dotenv'

export const ENDPOINT_URL = DOTENV_ENDPOINT_URL

man_facepalming

that fixed it for me :unamused:

[mattiasahlsen]

"yarn start -c" worked for me with expo, it's for clearing cache

[switch13]

reinstalling the offending module, then switching between npx worked for me in RN60.0.

1. npm install --save react-native-copilot (my offending module)
2. npx react-native run-ios
3. react-native run-ios