Unable to resolve module @env using import method

[saeid-elio]

Since issue https://github.com/goatandsheep/react-native-dotenv/issues/308 is closed I'm reporting the same issue here again as I have tried all feedback there and still my error is not resolved. Note that I do not use Expo and installed my react native app using react native cli and when I run npm run android I get the following error in terminal. My Android 14 phone is connected via USB to my macbook and I also can use .env using process.env, but if I use for example import {API_TOKEN} from '@env'; then I get the error you see below.

BUILD SUCCESSFUL in 12s
160 actionable tasks: 10 executed, 150 up-to-date
info Connecting to the development server...
info Starting the app on "R5CX533RM3X"...
Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=com.brryapplication/.MainActivity }
 BUNDLE  ./index.js 

error: Error: Unable to resolve module @env from /Users/sm/Sites/brry/application/src/components/common/Header.tsx: @env could not be found within the project or in these directories:
  node_modules
> 4 | import {API_TOKEN} from '@env';
    |                          ^
  5 |
  6 | const styles = StyleSheet.create({
  7 |   container: {
    at ModuleResolver.resolveDependency (/Users/sm/Sites/brry/application/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:138:15)
    at DependencyGraph.resolveDependency (/Users/sm/Sites/brry/application/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at /Users/sm/Sites/brry/application/node_modules/metro/src/lib/transformHelpers.js:156:21
    at resolveDependencies (/Users/sm/Sites/brry/application/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (/Users/sm/Sites/brry/application/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at async Promise.all (index 6)
    at async visit (/Users/sm/Sites/brry/application/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 5)
    at async visit (/Users/sm/Sites/brry/application/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 2)

Package.json

{
  "name": "BrryApplication",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.23.1",
    "@react-native-community/checkbox": "^0.5.17",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.4.1",
    "@reduxjs/toolkit": "^2.2.2",
    "react": "18.2.0",
    "react-devtools": "^5.1.0",
    "react-native": "0.73.6",
    "react-native-input-select": "^1.3.6",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-screens": "^3.30.1",
    "react-native-svg": "^15.2.0",
    "react-native-svg-icon": "^0.10.0",
    "react-native-svg-transformer": "^1.3.0",
    "react-native-svg-uri": "^1.2.3",
    "react-native-webview": "^13.8.4",
    "react-redux": "^9.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-native-dotenv": "^3.4.11",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

babel.config.js

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

tsconfig.json

{
  "extends": "@react-native/typescript-config/tsconfig.json"
}

[github-actions[bot]]

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/506

[doublethefish]

As mentioned on #308 this other module works straight out of the box: https://github.com/lugg/react-native-config

[halilibrahimcelik]

I have created a custom type decleration env.d.ts like this and then imported but then again, this is not a ideal solution, If any one come up with a nicer one, I'm all ears declare module '@env' { export const GOOGLE_API_KEY: string; }