ReferenceError: process is not defined, NodeJs, Heroku-CodePudding

I'm using environment variables on my project to load maps from Google Maps API, and to use it I need to provide the API key, so I register a environment variables on heroku like API_KEY=myapikey, and then I checked the variable was created

Then I access the varible using this code:

config.js

const dotenv = require('dotenv');

dotenv.config();

module.exports = {
  api_key: process.env.API_KEY
};

And try to use the env with this code:

map.js

import config from "./config";

const url = "...";
const PlaceDiv = document.querySelector('#map');

fetch(url)
  .then(res => res.json())
  .then(content => {
    let content_list = '';
    content_list = `
     <h1>${content.name}</h1>
     <iframe
        ...
        src="https://www.google.com/maps/embed/v1/place? 
        key=${config.api_key}
        &q=New York">
     </iframe>
     `
    PlaceDiv.innerHTML = content_list;
  })

(I had to use fetch because I getting data from a online JSON file)

But when I run the project I receive this erro:

ReferenceError: process is not defined

I'm doing something wrong ? And there is some way to implement this in anorther way ?

CodePudding user response：

So basically the whole point of it it wouldn't work, I was trying to hide my API_KEY using environment variables, but in the end anyone would be able to see the variable inspecting the page, so if you trying to do something like this you will need to load your html on the server and just return it on the client side, so your credentials will be hidden

CodePudding user response：

Try using Dotenv for process environments and also make sure you are using process environments in code as follows const googleMapsApiKey = process.env.API_KEY.