react-native-dotenv: Error: Unable to resolve module `@env` from `src/utils.ts`: @env could not be found within the project.

I am using typescript and I’ve encountered the same issue after upgrading to 2.x. Here is a workaround for it:

• Create a types folder in your project
• Inside that folder, create a *.d.tsfile, say, env.d.ts
• in that file, declare a module as the following format:

declare module '@env' {
  export const API_BASE: string;
}

You should add all of your .env variables inside this module.

• Finally, add this folder into the typeRoots field in your tsconfig.json file:

{
...
    "typeRoots": ["./src/types"],
...
}

@goatandsheep This is happening to me too. I don’t think it’s a duplicate issue. The other issue #38 seems to only affect production builds but I can’t even get it working in dev / metro and Typescript complains about the import in vs code (same as with the OP).

I have also done everything @mylonasg88 mentioned.

Here is my config file:

// babel.config.js ...

module.exports = {
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["module:react-native-dotenv", {
      "moduleName": "@env",
      "path": ".env",
      "blacklist": null,
      "whitelist": null,
      "safe": true,
      "allowUndefined": true
    }]
  ]
};

Try it but then also change @env in the document to react-native-dotenv. Basically you can rename your module whatever you want. I have a feeling this may reduce issues

My js file import { PUBLIC_KEY } from 'react-native-dotenv';

My babel file

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

It’s works for me 😃

Same here. I followed instructions:

 1. Clear watchman watches: watchman watch-del-all 
 2. Delete node_modules:
      rm -rf node_modules and run yarn install 
 3. Reset Metro's cache: yarn
      start --reset-cache 
 4. Remove the cache: rm -rf /tmp/metro-*

I tried to install the fs module by yarn add fs but it kept failing with more errors.

Close all the windows and restart the laptop.

For me it was a caching issue. I’m using NPM instead of Yarn. Thanks to @f4z3k4s for pointing me to the right direction:

• Use npm cache clean --force to clean the cache folder for your packages
• Start the project with expo start --clear. This will also clean the Metro bundler cache

My config:

presets: ['babel-preset-expo'],
plugins: [
  ['module:react-native-dotenv', {
    moduleName: '@env',
    path: '.env',
    blacklist: null,
    whitelist: null,
    safe: true,
    allowUndefined: true
  }]
]

For me, the solution was to properly clear the cache. Note that I am using npm not yarn. In my case it took:

npm cache clean --force npm start -- --reset-cache which in my setup (standard Expo setup) is equivalent to react-native start "--reset-cache"

changing the import module name worked for me

change from

import { VIEW_URL } from "@env"

to react-native-dotenv:

import { VIEW_URL } from "react-native-dotenv"

And now it is working for me…

babel.config.js:

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

https://github.com/goatandsheep/react-native-dotenv/issues/141#issuecomment-864414284

After updating your babel.config.js file ensure to reset your cache with yarn start --reset-cache for the changes to take place.

@goatandsheep This is happening to me too. I don’t think it’s a duplicate issue. The other issue #38 seems to only affect production builds but I can’t even get it working in dev / metro and Typescript complains about the import in vs code (same as with the OP).

I have also done everything @mylonasg88 mentioned.

Here is my config file:

// babel.config.js ...

module.exports = {
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["module:react-native-dotenv", {
      "moduleName": "@env",
      "path": ".env",
      "blacklist": null,
      "whitelist": null,
      "safe": true,
      "allowUndefined": true
    }]
  ]
};

this fixed my issue, and i’m able to use this package properly now

Was able to resolve this. So realised that my rebuild was not happening successfully even after the clearing commands. The only way the rebuild was successful, was when I made some edit to the code.

Try it but then also change @env in the document to react-native-dotenv. Basically you can rename your module whatever you want. I have a feeling this may reduce issues

I used this configuration and it worked for me.

env.d.ts

declare module 'react-native-dotenv' {
  export const API-KEY: string;
}

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    plugins: [
      [
        'module:react-native-dotenv',
        { moduleName: 'react-native-dotenv', path: '.env' },
      ],
    ],
  };
};

index.ts

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

Not sure if it’s good or not (security-wise) but it is working for me.

Only dependency which is needed is react-native-dotenv, not even the @types/react-native-dotenv is needed.

I used this configuration and it worked for me.

env.d.ts

declare module 'react-native-dotenv' {
  export const API-KEY: string;
}

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    plugins: [
      [
        'module:react-native-dotenv',
        { moduleName: 'react-native-dotenv', path: '.env' },
      ],
    ],
  };
};

index.ts

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

Not sure if it’s good or not (security-wise) but it is working for me.

Only dependency which is needed is react-native-dotenv, not even the @types/react-native-dotenv is needed.

thanks. this worked for me.

“plugins”: [ [“module:react-native-dotenv”, { “moduleName”: “@env”, “path”: “.env”, “blacklist”: null, “whitelist”: null, “safe”: true, “allowUndefined”: true }] ]

same to me, and need to build again.

I used this configuration and it worked for me.

env.d.ts

declare module 'react-native-dotenv' {
  export const API-KEY: string;
}

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    plugins: [
      [
        'module:react-native-dotenv',
        { moduleName: 'react-native-dotenv', path: '.env' },
      ],
    ],
  };
};

index.ts

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

Not sure if it’s good or not (security-wise) but it is working for me.

Only dependency which is needed is react-native-dotenv, not even the @types/react-native-dotenv is needed.

This worked for me too! thx

Just to clarify, my project is running fine, I’m just dealing with the VS Code errors below. I upgraded, and spent a while trying various things. I am able to get the module to load successfully without the IDE error sometimes, but honestly I can’t tell you why. Doesn’t seem to matter because whenever I close and reopen the file it will display the error again.

<kbd></kbd>

<kbd></kbd>

I’m able to run the project, but the VS Code errors are a bit annoying. I’m silencing them with @ts-ignore for now.

👋 Hi there - I’m having a similar issue as well in my TypeScript project. When I added the env.d.ts file, with these contents:

declare module '@env' {
  export const DETOX_ENV: string;
}

I no longer have any TypeScript errors. But when I try to build my app using react-native bundle --reset-cache --entry-file='index.js' --bundle-output='./ios/TestApp/main.jsbundle' --dev false --platform ios, I get this error:

error Unable to resolve module `@env` from `config.ts`: @env could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*. Run CLI with --verbose flag for more details.

I’ve tried clearing watchman watches, node_modules, etc. but no luck. My babel.config.js file looks like this:

  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'jest-hoist',
    [
      'module:react-native-dotenv',
      {
        moduleName: '@env',
        path: '.env',
        safe: false,
        allowUndefined: true,
      },
    ],
  ],

Basically, I have no TypeScript import errors now, but I do get a Unable to resolve module @env from config.ts: @env could not be found within the project. error when trying to build. Any ideas?

Did what @jilvanx suggested and it worked perfectly. Thanks for the solution! Since I am using typescript I just had to add an env.d.ts file with declare module 'react-native-dotenv';

For me, the solution was to properly clear the cache. Note that I am using npm not yarn. In my case it took:

npm cache clean --force npm start -- --reset-cache which in my setup (standard Expo setup) is equivalent to react-native start "--reset-cache"

Solved my issue.

Hi, i was struggling 1 hour with this problem, nothing worked, finally some miracle happened when i changed in .env from API_KEY=xx to API_KEY = xxx and saved…

if your babel.config.js has the line api.cache(true) try rerunning and changing the line to api.cache(false). If this works you can go back to api.cache(true) and change it when you update the file.

in my case, @ajaxjiang96’s solution works well. thank you. 😃

For others that encounter this issue, even in TS projects #38 can happen and we finally solved it with this solution: https://github.com/facebook/react-native/issues/29351#issuecomment-657929014

I’m still facing this issue with version 2.4.2 Have also added the plugin in babel.config.js.

Anybody having any luck resolving this. Note I’m not using TS

@goatandsheep Seems to be the same. https://github.com/JanithaR/image-finder/blob/react-native-dotenv-update/package.json#L19

@JanithaR Anyone have a test environment https://snack.expo.io ?

If it’s an example repo you are asking for, here it is. https://github.com/JanithaR/image-finder/blob/master/src/api.ts