error: Error: Unable to resolve module @env

[russmenum]

• [] Asked question in discussions (would if I knew where this was?)
• Tried the troubleshooting Wiki
• [] Followed the migration Wiki (fresh install did not apply)

Describe the bug
A clear and concise description of what the bug is.

Fresh install getting

error: Error: Unable to resolve module @env from /Users/[USER]/github/[APP]/screens/Map.js: @env could not be found within the project.

babel.config.js based on documentation as folows:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    //plugins: ['react-native-reanimated/plugin'],
    plugins: [
      'module:react-native-dotenv',
      'react-native-reanimated/plugin',
      // ["module:react-native-dotenv", {
      //   "envName": "APP_ENV",
      //   "moduleName": "@env",
      //   "path": ".env",
      //   "blocklist": null,
      //   "allowlist": null,
      //   "blacklist": null, // DEPRECATED
      //   "whitelist": null, // DEPRECATED
      //   "safe": false,
      //   "allowUndefined": true,
      //   "verbose": false
      // }]
    ]
  };
};

To Reproduce
Steps to reproduce the behavior:

1. npm install react-native-dotenv
2. add .env to root dir
3. config babel.config.js as shown above
4. add ```import {ENV_KEY} from '@env';
5. See error

Expected behavior
A clear and concise description of what you expected to happen.

I expect @env to be defined so I can import from the .env

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: iOS simpulator 15.2, iPhone 11
• Browser: RN app there is not browser at play

Additional context
Add any other context about the problem here.

Have tried killing metro and simulator, but problem presisits

[github-actions]

Hey, thank you for opening this issue! 🙂 To boost priority on this issue and support open source please tip the team at https://issuehunt.io/r/goatandsheep/react-native-dotenv/issues/308

[russmenum]

I get that devs got to eat too, but since this library does not work and only addresses bugs when paid, I found this one

Simple and works, no need to modify babble, just standard modern auto-link and pods

[goatandsheep]

Did you install as dev dependency? Sorry about the issue. I'd like to be able to help

Up to you. That's still a good library if you want to deal with linking. This is a JS solution.

[leroux-p]

@goatandsheep was I supposed to install this as a dev dependency?
I followed the tutorial, but I still cannot resolve @env

[goatandsheep]

Yes it should be dev dependency

[YouRik]

Same problem here. Have now installed as dev dependency but was not resolved

[goatandsheep]

How can I help? Are you using typescript? How are you trying to import? Is it possible to show the project?

[YouRik]

Thank you very much for your readiness to help.
It appears that the error is only shown by the linter (in VS Code at least) but the code actually works. So it's not a real error.
I created a small Expo typescript template repo so you can check. Purely for the sake of reproducibility, I also added the .env file with a dummy entry.

Here is the URL https://github.com/YouRik/RNDotenvTest which you should have access to, @goatandsheep.

I have imported it according to the steps in this project's README:

• Install react-native-dotenv (as dev dependency or normal)
• Install types
• Add the babel plugins code with "react-native-dotenv" as module name
• Import and use the entry in screens/TabOneScreen.tsx

Do you know if there is a way to avoid this error in the linter?

[goatandsheep]

Typically you can avoid this by using "react-native-dotenv" as your "moduleName".

[YouRik]

As you should see, that is what I did. Do you see anything else that was not set up correctly? Do you get the same error when cloning the repo I linked?

[YouRik]

I'm sorry, my mind was apparently preoccupied with something else.
The linter error I get after changing the module name is not the one in the issue description but actually "Module '"react-native-dotenv"' has no exported member 'DUMMY_ENTRY'."
Is this related? Should we try to troubleshoot this outside of this issue (if you have any other suggestions on how we could fix it)?

[LucasRobert123]

Para funcionar basta configurar o moduleName com o @env, e tb se tiver usando typescript o nome do múdulo será @env, isso resolveu pra mim.
import{BASE_URL} from '@env'
por exemplo

[shakthiGokul]

Hi , can i access the Env variable map api key in androidmanifest.xml file in react native? thanks in Advance

[Jonak-Adipta-Kalita]

Thank you very much for your readiness to help. It appears that the error is only shown by the linter (in VS Code at least) but the code actually works. So it's not a real error. I created a small Expo typescript template repo so you can check. Purely for the sake of reproducibility, I also added the .env file with a dummy entry.

Here is the URL https://github.com/YouRik/RNDotenvTest which you should have access to, @goatandsheep.

I have imported it according to the steps in this project's README:

• Install react-native-dotenv (as dev dependency or normal)
• Install types
• Add the babel plugins code with "react-native-dotenv" as module name
• Import and use the entry in screens/TabOneScreen.tsx

Do you know if there is a way to avoid this error in the linter?

I also got the same error, when using the @env import in a .tsx file, but in a .ts file it works fine!

[Jonak-Adipta-Kalita]

i found the solution, just add, "**/*.tsx" in the include array in tsconfig.json

[zdxxxxxx]

when i use babel-plugin-module-resolver，it does't work.
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
require.resolve('babel-plugin-module-resolver'),
{
alias: {
'@utils': './libs/utils',
'@SDK': './libs/sdk',
'@env': './node_modules/react-native-dotenv',
},
},
],
[
'module:react-native-dotenv',
{
moduleName: '@env',
path: '.env',
blacklist: null,
whitelist: null,
safe: false,
allowUndefined: true,
},
],
],
};
Unable to resolve module fs , 'const {readFileSync} = require('fs')'
I have installed this libary as devDependences!

[angelgonzalezev]

If you are using TS. This solved my issue https://dev.to/bhatvikrant/how-to-add-environment-variables-in-a-react-native-project-with-ts-2ne5

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rodrigodiasf1984]

First I've did yarn add dotenv react-native-dotenv expo-constants
Second, this works for me to close the simulator, reset the cache, and expo start!

[omeersari]

having this problem too. couldn't fix it.

[goatandsheep]

What does your Babel look like? What version of library are you on?

[omeersari]

babel file

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module:react-native-dotenv',
        {
          envName: 'APP_ENV',
          moduleName: '@env',
          path: '.env',
        },
      ],
    ],
  };
};

"react-native": "0.69.6",
"react-native-dotenv": "^3.3.1",
"expo": "~46.0.16",

and in one of my js i use it like this:

import { SUPABASE_API_URL, SUPABASE_API_KEY } from '@env';

and the error I get: Unable to resolve "@env" from "src/utils/...js"

[goatandsheep]

Is react-native-dotenv a dev dependency? Also keep API.cache(false)

[omeersari]

no, it is not

[omeersari]

well when I kept API.cache(false) it worked. I have no idea why.

[goatandsheep]

I'm so glad 🙌 but I do advise you keep it as a devDependency

[Tchaikovsky1114]

react-native-dotenv

it works for me! thanks a lot

[iovreche]

It does not work for me

[goatandsheep]

Hi @iovreche please open a new ticket with your project details. I'm locking this