react-native-dotenv in react native expo working for ios and android but NOT web

[totallytotallyamazing]

Using react-native, "expo": "^46.0.14" in macOS Monterey 12.6.3,
I installed "react-native-dotenv" in my react native expo app and it's working fine for ios and android but it's NOT working in my Web Development Build.
Web does not see path:
import { EXPO_CLIENT_ID, ANDROID_CLIENT_ID, IOS_CLIENT_ID, WEB_CLIENT_ID } from "@env";
and reads, console.log(process.env.EXPO_CLIENT_ID); as undefined.
I installed yarn add react-native-dotenv
Created and put the following 2 files, in the root of my directory, see below:
// .babelrc

{
    "plugins": [
        ["module:react-native-dotenv", {
            "envName": "APP_ENV",
            "moduleName": "@env",
            "path": ".env",
            "blocklist": null,
            "allowlist": null,
            "safe": false,
            "allowUndefined": true,
            "verbose": false
        }]
    ]
}

// .env

EXPO_CLIENT_ID=SomeRandomNumber
ANDROID_CLIENT_ID=SomeRandomNumber
IOS_CLIENT_ID=SomeRandomNumber
WEB_CLIENT_ID=SomeRandomNumber

on https://www.npmjs.com/package/react-native-dotenv the claim is made:
Introduction
This babel plugin lets you inject your environment variables into your Javascript environment using dotenv for multiple environments. It is best suited for use with react native and works with all flavors including web.
Any thoughts, comments, or suggestions would be greatly appreciated!
Derek

[goatandsheep]

Although this is heavily tested on Android and iOS, I do most of my tests with web. Sorry it's not working for you! Let's figure out why that's the case.

• You don't need to set the values to the defaults, but it can't hurt!
• reinstall as devDependency yarn add react-native-dotenv -D
• try console.log(EXPO_CLIENT_ID);

[totallytotallyamazing]

Ok - no bootstrap...
I'm reluctant to upgrade babel and think my versions are high enough (not sure, but basing that off the link you just sent).

"dependencies": {
        "@babel/core": "7.9.0",
        "babel-loader": "8.1.0",

Are my versions high enough?

I've tried api.cache(false) and api.cache(true) in my babel.config.js to no avail. Also as a side note, the only way I have any success with getting this working is to utilize the .babelrc file and have tried different configurations to babel.config.js for pref changes but that never worked for me.

[totallytotallyamazing]

This config is working for ios and web and I think android Expo Go as well but it's currently giving me blue screen "Something went wrong." errors, which sometimes happen and are usually resolved by just waiting them out...

I removed this:

// import { EXPO_CLIENT_ID, ANDROID_CLIENT_ID, IOS_CLIENT_ID, WEB_CLIENT_ID } from '@env';

And changed by adding process.env:

console.log(process.env.EXPO_CLIENT_ID);

    const [request, response, promptAsync] = Google.useAuthRequest({
        expoClientId: `${process.env.EXPO_CLIENT_ID}.apps.googleusercontent.com`,
        androidClientId: `${process.env.ANDROID_CLIENT_ID}.apps.googleusercontent.com`,
        iosClientId: `${process.env.IOS_CLIENT_ID}.apps.googleusercontent.com`,
        webClientId: `${process.env.WEB_CLIENT_ID}.apps.googleusercontent.com`,
        redirectUri: makeRedirectUri({
            scheme: 'host.exp.exponent',
            useProxy: true,
            native: Platform.select({
                android: `com.googleusercontent.apps.${process.env.ANDROID_CLIENT_ID}:/oauth2redirect`,
                default: undefined
            })
        }),
        scopes: ['profile', 'email'],
        permissions: ['public_profile', 'email', 'gender', 'location']
    });

Do you have any thoughts on this setup? Will it interfere with things when I go to hide my APIs with say, express on the backend or some other backend solution?

[totallytotallyamazing]

Hey Kemal,
Do you have any response to my questions from 3 weeks ago?
Thank you for the help you did provide already but I'm still left a bit unsure about my use of react-native-dotenv.
Thanks,
Derek

[goatandsheep]

Hey Derek, sorry for the late response. did you install the lib as a devDependency or regular dependency?

[totallytotallyamazing]

Hey Kemal, I recently upgraded to expo sdk 49 from 47 and don't require a dotenv plugin any longer, not sure if I needed it with 47 either, since my problem is fixed there was no need to do backwards research just for knowledge.

Thank you for the help you could offer me though.
Derek