Variables always undefined on web

[shahmir-k]

• [ ] Asked question in discussions
• [X ] Tried the troubleshooting Wiki
• [X ] Followed the migration Wiki
• [X ] Installed library as devDependency not production dependency

Describe the bug I have a fully working app on react-native that works on both web and mobile. I am trying to shift away from using hard-coded api urls and put them all into a .env file. When I added react-native-dotenv my program runs just fine, but all the env variables are being returned as undefined.

To Reproduce Steps to reproduce the behavior:

1. npx expo install react-native-dotenv
2. create .env file
3. import variables from @env
4. variables print out as undefined :(

Expected behavior I expected it to return my url string or atleast give an error

Screenshots

Desktop (please complete the following information):

• OS: [Linux Mint 22 and Windows 10]
• Browser [Firefox]
• Version [I don't know]

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 The example expo project you posted works, but my program doesn't work... I don't understand why. The only difference is that the example project uses webpack while I rely on just expo to build my web version.

[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/533

[shahmir-k]

I have made a fresh react native project from scratch using the latest expo to test the react-native-dotenv package. I have managed to get it working, but I believe there are serious issues with your documentation when using the latest versions of expo.

Here is the link to my test project:

https://github.com/shahmir-k/react-native-dotenv-example

The main issues I found was that I had to use the following babel.config.js to get it to work unlike what the documentation said:

module.exports = function(api) {
  api.cache(false);
  return {
    presets: [
      ['@babel/preset-env', { targets: { node: 'current' } }],
      '@babel/preset-react',
      '@babel/preset-typescript',
      '@babel/preset-flow'
    ],
    plugins: [
      ['module:react-native-dotenv']
    ]
  };
};

I also do not understand why I require these babel preset packages? They were not listed or explained anywhere in the documentation. I was not prompted to install them when trying to add react-native-dotenv to my original project, and my original project ran the web app without errors without these babel preset packages.

When I tried to implement these changes( new babel.config.js and installed preset packages) into my original WebRTC project, I was still encountering the same return undefined behaviours. Any help would be greatly appreciated.

[mahcloud-tinker]

Same issue