Error when importing #457

rodrigodiasf1984 · 2023-09-05T06:58:55Z

Asked question in discussions
Tried the troubleshooting Wiki
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:

follow the official readme and this tutorial: https://dev.to/bhatvikrant/how-to-add-environment-variables-in-a-react-native-project-with-ts-2ne5
create the variable on .env file => GOOGLE_MAPS_APIKEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
Go to the TSX file and import { GOOGLE_MAPS_APIKEY } from '@env';
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 · 2023-09-11T18:02:26Z

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 · 2023-09-12T08:07:39Z

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 · 2023-09-12T12:12:02Z

@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 · 2023-09-12T13:18:51Z

@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 · 2023-10-06T20:19:29Z

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

rodrigodiasf1984 · 2023-10-09T13:24:11Z

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

Not yet, let me know if you find it.

exzos28 · 2023-10-09T13:29:01Z

@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 · 2023-10-09T13:40:15Z

@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 · 2023-10-09T13:47:31Z

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

erwannbst · 2023-11-09T09:23:16Z

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

rodrigodiasf1984 · 2023-11-10T09:20:30Z

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 · 2023-11-11T11:19:32Z

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 · 2023-11-15T10:25:41Z

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

goatandsheep · 2024-02-08T20:01:54Z

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

goatandsheep · 2024-02-08T20:58:36Z

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 · 2024-02-09T11:00:44Z

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 · 2024-02-11T06:10:03Z

There's two options I recommend:

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 · 2024-02-12T07:48:48Z

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 · 2024-02-14T15:50:40Z

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 · 2024-03-05T19:25:53Z

There's two options I recommend:

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' {
...
}

rodrigodiasf1984 assigned goatandsheep Sep 5, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error when importing #457

Error when importing #457

rodrigodiasf1984 commented Sep 5, 2023 •

edited

exzos28 commented Sep 11, 2023 •

edited

rodrigodiasf1984 commented Sep 12, 2023 •

edited

exzos28 commented Sep 12, 2023

rodrigodiasf1984 commented Sep 12, 2023

ser-emejia commented Oct 6, 2023

rodrigodiasf1984 commented Oct 9, 2023

exzos28 commented Oct 9, 2023

rodrigodiasf1984 commented Oct 9, 2023

exzos28 commented Oct 9, 2023

erwannbst commented Nov 9, 2023

rodrigodiasf1984 commented Nov 10, 2023

erwannbst commented Nov 11, 2023

rodrigodiasf1984 commented Nov 15, 2023

goatandsheep commented Feb 8, 2024

goatandsheep commented Feb 8, 2024

rodrigodiasf1984 commented Feb 9, 2024

goatandsheep commented Feb 11, 2024

rodrigodiasf1984 commented Feb 12, 2024

goatandsheep commented Feb 14, 2024

DarkShtir commented Mar 5, 2024

Error when importing #457

Error when importing #457

Comments

rodrigodiasf1984 commented Sep 5, 2023 • edited

exzos28 commented Sep 11, 2023 • edited

rodrigodiasf1984 commented Sep 12, 2023 • edited

exzos28 commented Sep 12, 2023

rodrigodiasf1984 commented Sep 12, 2023

ser-emejia commented Oct 6, 2023

rodrigodiasf1984 commented Oct 9, 2023

exzos28 commented Oct 9, 2023

rodrigodiasf1984 commented Oct 9, 2023

exzos28 commented Oct 9, 2023

erwannbst commented Nov 9, 2023

rodrigodiasf1984 commented Nov 10, 2023

erwannbst commented Nov 11, 2023

rodrigodiasf1984 commented Nov 15, 2023

goatandsheep commented Feb 8, 2024

goatandsheep commented Feb 8, 2024

rodrigodiasf1984 commented Feb 9, 2024

goatandsheep commented Feb 11, 2024

rodrigodiasf1984 commented Feb 12, 2024

goatandsheep commented Feb 14, 2024

DarkShtir commented Mar 5, 2024

rodrigodiasf1984 commented Sep 5, 2023 •

edited

exzos28 commented Sep 11, 2023 •

edited

rodrigodiasf1984 commented Sep 12, 2023 •

edited