Search code examples
typescriptreact-nativeexpomobile-developmentdotenv

react-native-dotenv error: "Module '"@env"' has no exported member"

I'm trying to use react-native-dotenv package with react-native/expo.

Yesterday I built this and saw no errors with everything working fine. Today I log into my pc, and when I opened my IDE I see the red squiggly lines, but the application runs fine.

I've followed several guides in setting up the types and json config. I can't see why it's giving me the error Module '"@env"' has no exported member 'TEST_ONE'. Below are the changes I made to the project to get it working yesterday...

File/Folder Structure

enter image description here

App.tsx

...
import { TEST_ONE, TEST_ONE_DEV } from '@env';
...

babel.config.js

module.exports = function (api) {
  ...
  return {
    ...
    plugins: [
      ...
      [
        '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
        }
      ]
    ]
  };
};

tsconfig.json

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

.env

RANDOM_ENV=HelloWorld

.env.development

RANDOM_ENV_DEV=HelloWorldDev

./app/types/Env.ts

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

The application runs fine

enter image description here

The issue is shown below

enter image description here

Error: Module '"@env"' has no exported member 'TEST_ONE'.ts(2305)

Solution

  • Ah, I just realized I missed the naming...

    App.tsx change

    import { TEST_ONE, TEST_ONE_DEV } from '@env';

    to

    import { RANDOM_ENV, RANDOM_ENV_DEV } from '@env';

    I'll leave this question up here for reference in case anyone needs to see how to set it up with expo.