Error when importing

[rodrigodiasf1984]

• [x] Asked question in discussions
• [x] Tried the troubleshooting Wiki
• [x] Followed the migration Wiki

Describe the bug Hi guys I'm getting this error when import the GOOGLE_MAPS_APIKEY from '@env' I've followed the official documentation, an previous issue and this tutorial, sorry but I don't know what I'm missing.

To Reproduce Steps to reproduce the behavior:

1. follow the official readme and this tutorial: https://dev.to/bhatvikrant/how-to-add-environment-variables-in-a-react-native-project-with-ts-2ne5
2. create the variable on .env file => GOOGLE_MAPS_APIKEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
3. Go to the TSX file and import { GOOGLE_MAPS_APIKEY } from '@env';
4. See error => Unable to resolve path to module '@env'.eslintimport/no-unresolved

Expected behavior import the env var without error

Screenshots Desktop (please complete the following information):

• OS: Ventura
• Browser Arc, Brave
• Version 13.4

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Babel-config:

module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ 'nativewind/babel', 'react-native-reanimated/plugin', [ 'module:react-native-dotenv', { moduleName: '@env', path: '.env', allowUndefined: false, }, ], ], };

env.d.ts

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

package json:

"dependencies": { "@aws-amplify/api": "^5.4.4", "@gorhom/bottom-sheet": "^4.4.5", "@hookform/resolvers": "^2.9.10", "@notifee/react-native": "^7.8.0", "@react-native-async-storage/async-storage": "^1.17.11", "@react-native-community/datetimepicker": "^6.7.5", "@react-native-community/netinfo": "^9.3.7", "@react-native-firebase/app": "^14.11.0", "@react-native-firebase/messaging": "^14.11.0", "@react-native-masked-view/masked-view": "0.2.8", "@react-navigation/native": "^6.0.13", "@react-navigation/native-stack": "^6.9.1", "@react-navigation/stack": "^6.3.4", "@shopify/flash-list": "^1.4.2", "aws-amplify": "^5.0.14", "clsx": "^1.2.1", "date-fns": "^2.29.3", "lottie-react-native": "^5.1.6", "nativewind": "^2.0.11", "phosphor-react-native": "^1.1.2", "react": "18.1.0", "react-hook-form": "^7.39.4", "react-native": "0.70.6", "react-native-actions-sheet": "^0.8.29", "react-native-background-fetch": "4.1.5", "react-native-background-geolocation": "4.10.1", "react-native-biometrics": "^3.0.1", "react-native-confirmation-code-field": "^7.3.1", "react-native-contacts": "^7.0.5", "react-native-device-info": "^10.4.0", "react-native-dotenv": "^3.4.9", "react-native-dropdown-picker": "^5.4.6", "react-native-flash-message": "^0.4.0", "react-native-floating-label-input": "^1.4.2", "react-native-gesture-handler": "~2.8.0", "react-native-google-places-autocomplete": "^2.5.1", "react-native-image-crop-picker": "^0.37.3", "react-native-iphone-x-helper": "^1.3.1", "react-native-maps": "^1.3.2", "react-native-modal-datetime-picker": "^14.0.1", "react-native-open-maps": "^0.4.0", "react-native-permissions": "^3.6.1", "react-native-phone-number-input": "^2.1.0", "react-native-ratings": "^8.1.0", "react-native-reanimated": "^2.14.4", "react-native-responsive-screen": "^1.4.2", "react-native-safe-area-context": "4.4.1", "react-native-screens": "~3.18.0", "react-native-splash-screen": "^3.3.0", "react-native-svg": "^13.9.0", "react-native-svg-transformer": "^1.0.0", "react-native-swipe-gestures": "^1.0.5", "react-native-swipe-list-view": "^3.2.9", "react-native-tooltip-2": "^0.1.3", "react-native-version-check": "^3.4.7", "react-native-webview": "^13.2.3", "redux-persist": "^6.0.0", "rn-swipe-button": "^1.3.8", "tailwindcss": "3.3.2", "yup": "^0.32.11", "zustand": "^4.3.6" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@testing-library/jest-native": "^5.4.1", "@testing-library/react-native": "^11.5.1", "@tsconfig/react-native": "^2.0.2", "@types/jest": "^29.4.0", "@types/react": "^17.0.43", "@types/react-native": "^0.70.11", "@types/react-native-dotenv": "^0.2.0", "@types/react-native-version-check": "^3.4.5", "@types/react-test-renderer": "^18.0.0", "@typescript-eslint/eslint-plugin": "^6.4.0", "babel-plugin-module-resolver": "^5.0.0", "eslint": "^8.0.1", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.1.0", "eslint-config-prettier": "^9.0.0", "eslint-config-standard-with-typescript": "^39.0.0", "eslint-import-resolver-babel-module": "^5.3.2", "eslint-plugin-import": "^2.28.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-n": "^15.0.0 || ^16.0.0 ", "eslint-plugin-prettier": "^5.0.0", "eslint-plugin-promise": "^6.0.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-native": "^4.0.0", "jest": "^29.6.4", "jest-transform-stub": "^2.0.0", "metro-react-native-babel-preset": "0.72.3", "prettier": "^3.0.3", "react-native-clean-project": "^4.0.1", "react-test-renderer": "^18.2.0", "typescript": "*" }, "resolutions": { "@types/react": "17.0.43", "@types/react-native": "~0.70.6" } }

[exzos28]

You should include env.d.ts to your tsconfig.ts file, like this:

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  ....
  "include": [
       ....
    "./env.d.ts"
  ],
  "exclude": ["node_modules"]
}

[rodrigodiasf1984]

You should include env.d.ts to your tsconfig.ts file, like this:

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  ....
  "include": [
       ....
    "./env.d.ts"
  ],
  "exclude": ["node_modules"]
}

Didn't work for me :

And now I'm getting another error on className:

Any idea how to solve it? Am I missing something?

[exzos28]

@rodrigodiasf1984 try to delete /* eslint-disable @typescript-.... on the first line and then restart IDE with reset cache.

And about className— React Native haven't got this property.

[rodrigodiasf1984]

@rodrigodiasf1984 try to delete /* eslint-disable @typescript-.... on the first line and then restart IDE with reset cache.

And about className— React Native hasn't got this property.

Sorry, but I don't see how removing the eslint-disable for any could help ;

I've used this "/* eslint-disable @typescript-eslint/no-explicit-any */" because I don't know how to type the ref of googleAutocomplete correctly, so I add this to avoid the error

[ser-emejia]

Hello, did you find any solution? I'm facing by the same issue

[rodrigodiasf1984]

Hello, did you find any solution? I'm facing by the same issue

Not yet, let me know if you find it.

[exzos28]

@rodrigodiasf1984 @ser-emejia try to add this:

  "include": [
    "src/**/*.ts", <-- !!
    "src/**/*.tsx", <-- !!
    "./env.d.ts",
  ],

Because you override these values when you extend your configuration

[rodrigodiasf1984]

@rodrigodiasf1984 @ser-emejia try to add this:

  "include": [
    "src/**/*.ts", <-- !!
    "src/**/*.tsx", <-- !!
    "./env.d.ts",
  ],

Because you override these values when you extend your configuration

Hi @exzos28 It doesn´t work for me,

And now I'm getting a lot of errors after adding the include on my tsconfig.json

[exzos28]

@rodrigodiasf1984 anyway it's not a problem of this package, you should find why your ts config doesn't work

[erwannbst]

On my side, removing "include": ["env.d.tsx"] from tsconfig.json solved the problem

[rodrigodiasf1984]

On my side, removing "include": ["env.d.tsx"] from tsconfig.json solved the problem

Hi erwannbst, I didn't the include on my tsconfig and I'm still getting the error, I've tried to delete, mobe the env.d.ts to the root of the project but the error persist.

[erwannbst]

This is the config I use which is working for me : tsconfig.json

{
    "extends": "@tsconfig/react-native/tsconfig.json",
    "exclude": ["node_modules"],
    "compilerOptions": {
        "jsx": "react",
        "paths": {
            "@/*": ["./features/*"],
            "typeRoots": ["./src/types"]
        }
    }
}

babel.config.js

module.exports = {
    presets: ["module:metro-react-native-babel-preset"],
    plugins: [
        [
            "module:react-native-dotenv",
            {
                envName: "APP_ENV",
                moduleName: "@env",
                path: ".env",
                blocklist: null,
                allowlist: null,
                safe: true,
                allowUndefined: false,
                verbose: false,
            },
        ],
    ],
};

My .env and .env.d.ts are at the root of my repository, not in ./types/ Hope it will solve your problem

[rodrigodiasf1984]

@erwannbst thanks for your answer, I've tried what you said, but it didn't work for me.

[goatandsheep]

hi i was able to recreate this issue. I'm working on it.

[goatandsheep]

react-native-dotenv should be a dev dependency (I see this mistake in your code)

here's what I tried:

• metro, no expo
• typescript
• Android

Every time I get a weird error, I make sure to run react-native start --reset-cache

If you are using ./types for your types, i use

tsconfig.json

  "compilerOptions": {
    "baseUrl": "types",
    "typeRoots": ["./types"],
  }

I tried esModuleInterop and it didn't really break it. Make sure the app is setup properly:

• don't do npm i -D path
• react-native-dotenv should be a dev dependency (I see this mistake in your code)
• react-native-dotenv should be properly configured in the plugins section in babel config

[rodrigodiasf1984]

react-native start --reset-cache

Hi @goatandsheep thanks for your help!

I've moved this package to dev dependencies

I've update the tsconfig:

but I can't remove "node_modules/@types" from typeRoots, if I do, I get errors with jest everywhere. Take a look at the image bellow:

with the modifications you suggest, I'm still getting the same typescript error:

this is my babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'nativewind/babel',
    'react-native-reanimated/plugin',
    [
      'module:react-native-dotenv',
      {
        moduleName: '@env',
        path: '.env',
        allowUndefined: false,
      },
    ],
  ],
};

[goatandsheep]

There's two options I recommend:

1. skip the import {GOOGLE_MAPS_APIKEY} from @env and switch to process.env.GOOGLE_MAPS_APIKEY

if that doesn't work: 2) rename @env as react-native-dotenv:

env.d.ts

declare module 'react-native-dotenv' {
...

babel.config.js

...
moduleName: 'react-native-dotenv'
...

index.tsx

import {GOOGLE_MAPS_APIKEY} from 'react-native-dotenv'

[rodrigodiasf1984]

Hi @goatandsheep thanks for your help, i've tried what you suggested and the typescript error has gone when I use the process.env.GOOGLE_MAPS_APIKEY but the maps don't work as expected. So I reverted the modifications and kept using the /* eslint-disable import/no-unresolved */

[goatandsheep]

Okay I spent the past 2 days figuring out issues with the library and will be overhauling docs again in a few days. Take a look at the wiki for the docs Todo if you need an immediate answer.

[DarkShtir]

There's two options I recommend:

1. skip the import {GOOGLE_MAPS_APIKEY} from @env and switch to process.env.GOOGLE_MAPS_APIKEY

if that doesn't work: 2) rename @env as react-native-dotenv:

env.d.ts

declare module 'react-native-dotenv' {
...

babel.config.js

...
moduleName: 'react-native-dotenv'
...

index.tsx

import {GOOGLE_MAPS_APIKEY} from 'react-native-dotenv'

Second variant helped me My files structure

├── .env
├── index.js
├── src
│   └── index.tsx
└── types
    ├── index.d.ts
    └── env.d.ts

my tsconfig.json

{
  ...
  "include": [
    "./src/**/*",
    "./App.tsx",
    "./types/env.d.ts",
    "./types/index.d.ts"
  ]
  ...
}

my babel.config.js

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

env.d.ts

declare module 'react-native-dotenv' {
...
}

[OzzyTheGiant]

Worked for me but when I used "react-native-dotenv" as the module name, TypeScript was having issues resolving stuff, so I used "dotenv" instead and it worked.