React native Question posted in
The official React Native documentation can be found here.

React native – How to resolve TypeScript error: "Property 'EXPO_PUBLIC_BACKEND_URL' does not exist on type 'typeof env'"?

I’m working on a React Native project with Expo and using TypeScript. I’m trying to access an environment variable using process.env.EXPO_PUBLIC_BACKEND_URL.

"The code works correctly when I run the app, but I get a TypeScript error in VSCode":

Property 'EXPO_PUBLIC_BACKEND_URL' does not exist on type 'typeof env'.

Here is the relevant part of my code:

const backendUrl = process.env.EXPO_PUBLIC_BACKEND_URL;
console.log(backendUrl);

I have the environment variable set up in my .env file and everything works fine during runtime. However, TypeScript doesn’t recognize the variable, causing the editor to display a squiggle error.

What I’ve tried:

  • I have ensured that the .env file is correctly set up and the variable is accessible at runtime.
  • Upgrading my Expo SDK to 51

My tsconfig.json:

{
    "extends": "expo/tsconfig.base",
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "jsx": "react-jsx",
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "strictFunctionTypes": true,
        "strictBindCallApply": true,
        "strictPropertyInitialization": true,
        "noImplicitThis": true,
        "alwaysStrict": true,
        "typeRoots": ["./env.d.ts"]
    }
}

My package.json:

{
    "name": "helphive-frontend",
    "version": "1.0.0",
    "description": "Frontend mobile application in Expo for Helphive platform.",
    "main": "node_modules/expo/AppEntry.js",
    "author": "Maiz",
    "license": "MIT",
    "scripts": {
        "start": "expo start",
        "android": "expo run:android",
        "ios": "expo run:ios",
        "web": "expo start --web",
        "lint": "eslint .",
        "format": "prettier --write ."
    },
    "dependencies": {
        "@react-native-firebase/app": "^19.2.2",
        "@react-native-firebase/messaging": "^19.2.2",
        "@react-navigation/bottom-tabs": "^6.5.20",
        "@react-navigation/native": "^6.1.12",
        "@react-navigation/native-stack": "^6.9.20",
        "@reduxjs/toolkit": "^2.2.1",
        "eas-cli": "^10.0.2",
        "expo": "^51.0.17",
        "expo-dev-client": "~4.0.19",
        "expo-document-picker": "~12.0.2",
        "expo-file-system": "~17.0.1",
        "expo-font": "~12.0.7",
        "expo-image-picker": "~15.0.6",
        "expo-location": "~17.0.1",
        "expo-secure-store": "^13.0.2",
        "expo-status-bar": "~1.12.1",
        "nativewind": "^2.0.11",
        "react": "18.2.0",
        "react-native": "0.74.2",
        "react-native-image-picker": "^7.1.1",
        "react-native-maps": "1.14.0",
        "react-native-paper": "^5.12.3",
        "react-native-paper-dropdown": "^1.0.7",
        "react-native-safe-area-context": "4.10.1",
        "react-native-screens": "3.31.1",
        "react-native-svg": "15.2.0",
        "react-native-vector-icons": "^10.0.3",
        "react-redux": "^9.1.0",
        "string-width": "^7.1.0",
        "yarn": "^1.22.22"
    },
    "devDependencies": {
        "@babel/core": "^7.20.0",
        "@eslint/compat": "^1.1.1",
        "@eslint/js": "^9.7.0",
        "@types/node": "^20.14.11",
        "@types/react": "~18.2.79",
        "@types/react-native": "^0.73.0",
        "@types/tailwindcss": "^3.1.0",
        "@typescript-eslint/eslint-plugin": "^7.16.1",
        "@typescript-eslint/parser": "^7.16.1",
        "eslint": "9.x",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-prettier": "^5.1.3",
        "eslint-plugin-react": "^7.34.4",
        "eslint-plugin-react-hooks": "^4.6.2",
        "globals": "^15.8.0",
        "husky": "^9.0.11",
        "lint-staged": "^15.2.7",
        "prettier": "^3.3.3",
        "tailwindcss": "3.3.2",
        "typescript": "^5.5.3",
        "typescript-eslint": "^7.16.1"
    },
    "engines": {
        "node": "20.15.0"
    },
    "lint-staged": {
        "**/*.{js,jsx,ts,tsx,json,css,md}": [
            "prettier --write",
            "eslint --fix",
            "git add"
        ]
    },
    "private": true
}

Steps to reproduce:

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Forgot to answer my solution.

    You have to create a env.d.ts typescript declaration file in the root directory of your project:

    declare namespace NodeJS {
    interface ProcessEnv {
        EXPO_PUBLIC_BACKEND_URL: string;
        // define more or use wildcard
    }
}

    also make sure env.d.ts is included in the tsconfig.json's "include" array:

    {
    "extends": "expo/tsconfig.base",
    "compilerOptions": {},
    "include": ["src/**/*", "App.tsx", "env.d.ts"] //here
}

  2. 0

    Adding this to tsconfig.json fixed it for me:

      "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts", "app.config.js"]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search