how to hide apikeys and other variable in javascript?

Having trouble hiding the API key and other variables on my website using Javascript. I tried dotenv (npm install dotenv) but it did not work. I tried it using:

1. import

import * as dotenv from 'dotenv'
dotenv.config();
console.log(process.env);

and it runs to an error

Uncaught SyntaxError: Cannot use import statement outside a module

2. require

require('dotenv').config();

also runs to an error

Uncaught ReferenceError: require is not defined

.env file

apiKey=XXXXXXXXXXXXXXXXXX
authDomain=XXXXXXXXXXXXX
etc=etcetera

where were the .env variables will be used

const firebaseConfig = {
    apiKey: process.env.apiKey,
    authDomain: process.env.authDomain,
    databaseURL: process.env.databaseURL,
    projectId: process.env.projectId,
    storageBucket: process.env.storageBucket,
    messagingSenderId: process.env.messagingSenderId,
    appId: process.env.appId,
    measurementId: process.env.measurementId
};

firebase.initializeApp(firebaseConfig);

Is there a way to make dotenv work? If none, is there any other way to hide API keys?

PS: I’ve purposely enabled the read and write in firebase and I need to hide api keys and such.