CODEWITHSUNDEEP
typescriptreact-nativeenvironment-variables
Vagner Wentz
Vagner Wentz

Reputation: 566

Enviroment variable at React Native does not working using TypeScript

I added the react-native-dotenv library and followed the guide using TypeScript.

I created a .env file

MARVEL_API = <url>
MARVEL_PUBLIC_KEY = <public-key>
MARVEL_PRIVATE_KEY = <private-key>

I added this options at babel.config.js file at the presets

'module:react-native-dotenv',
    {
      moduleName: '@env',
      path: '.env',
      whitelist: ['MARVEL_API', 'MARVEL_PUBLIC_KEY', 'MARVEL_PRIVATE_KEY'],
      safe: false,
      allowUndefined: true,
    },

I created a types folder with the end.d.ts file and I declared the @env as

declare module '@env' {
  export const MARVEL_API: string;
  export const MARVEL_PUBLIC_KEY: string;
  export const MARVEL_PRIVATE_KEY: string;
}

Whe I saved the files, launched this error:

error: index.js: [BABEL] /home/vagner/Documents/www/objective/index.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

I saw to write yarn start --reset-cache but it did not work.

Upvotes: 2

Views: 5317

Answers (1)

Vagner Wentz
Vagner Wentz

Reputation: 566

I found the solution, I changed the babel.config.js file. The new version is

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module:react-native-dotenv',
      {
        moduleName: '@env',
        path: '.env',
        blacklist: null,
        whitelist: ['MARVEL_API', 'MARVEL_PUBLIC_KEY', 'MARVEL_PRIVATE_KEY'],
        safe: false,
        allowUndefined: true,
      },
    ],
  ],
};

Upvotes: 4

Related Questions