2

I'm doing a simple weather app and I'm trying to set my API key as an environment variable like you would in Python using apiKey = os.getenv['MY_API_KEY']. I'm having trouble getting the API key to work, even through using dotenv and browserify. When I run index.html and inspect the console it always says Reference Error: require not defined.

index.html

<body>
    <form action="weather.js" id="userForm" method="GET">
        <label for="city">City:</label>
        <input type="text" id="city" name="city" placeholder="Enter your city"><br>
        <label for="state">State:</label>
        <select id="state" name="state">
            <option value="AL">Alabama</option>
            ...
            <option value="WY">Wyoming</option>
        </select><br>
        <input type="button" id="submit" value="Get Weather!">
    </form>

    <div class="display">
         <h1 class="name"></h1>
         <p class="desc"></p>
         <p class="temp"></p>
    </div>

    <script src="weather.js"></script>
    <!-- ^^^ I've replaced this with bundle.js per the dotenv docs as well -->
</body>

weather.js

require('dotenv').config();

var button = document.querySelector('#submit');
var city = document.querySelector('#city');
var state = document.querySelector('#state');
var namee = document.querySelector('.name');
var desc = document.querySelector('.desc');
var temp = document.querySelector('.temp');
const apiKey = process.env.WEATHER_KEY

button.addEventListener('click',function(){
    fetch('https://api.openweathermap.org/data/2.5/weather?q='+city.value+','+state.value+
    ',US&units=imperial&appid='+apiKey)
    .then(response => response.json())
    .then(data => {
        var nameValue = data['name'];
        var tempValue = data['main']['temp'];
        var descValue = data['weather'][0]['description'];

        namee.innerHTML = nameValue;
        temp.innerHTML = tempValue;
        desc.innerHTML = descValue;
    })

    .catch(err => alert('Wrong city name!'))
})

I understand why using require wouldn't normally work but I'm confused why it's not working with browserify.

danibarstad
  • 29
  • 7
  • Does [this](https://stackoverflow.com/questions/28696511/require-is-not-defined-error-with-browserify) help you? – 3174N Jan 05 '21 at 06:27
  • @3174N Sorta! I'm not getting the error anymore but when the app tries to make the API call, it is not setting ```const apiKey``` to the environment variable i set in my ```.env``` and returning ```undefined``` instead – danibarstad Jan 06 '21 at 03:56

0 Answers0