ReferenceError: window || document undefined

bpkush 0
Viewed 33

I have been playing about with public API's & the data is fetched and DOM is executed but i'm at a loss when i use an environment variable to hide the API_KEY by importing the dotenv module. Then i get either window or document is not defined ReferenceError. I have also changed the type to "module" in package.json file.

import * as dotenv from 'dotenv'

dotenv.config()

const API_KEY = process.env.API_KEY
console.log(API_KEY)

const choice = window.document.querySelector('input').value
const URL = `https://api.nasa.gov/planetary/apod?api_key=${API_KEY}&date=${choice}`

window.document.querySelector('button').addEventListener('click', () => {
    
    return(
        fetch(URL) 
        .then(res => res.json())
        .then(data => {
            console.log(data)
            if(data.media_type === 'image'){
                document.querySelector('#hd').src = data.hdurl 
                document.querySelector('iframe').style.display = 'none'
            }else if(data.media_type === 'video'){
                document.querySelector('iframe').src = data.url
                document.querySelector('#hd').style.display = 'none'
            }else { alert('Media Not Supported - Contact NASA Immediately')}
            document.querySelector('#title').innerText = data.title
            document.querySelector('#hd').src = data.hdurl
            document.querySelector('iframe').src = data.url
            document.querySelector('h3').innerText = data.explanation
        })
        .catch(err => {
            console.log(`error ${err}`)
        })
    )
})
dotenv dom javascript
1 Answers

if you are running this on node then you are in the backend and you cannot use the window or the document since you are running this in a console in the server.

return(
  fetch(URL) 
  .then(res => res.json())
  .then(data => {
      console.log(data);
      return data;
  })
  .catch(err => {
      console.log(`error ${err}`)
  })
)
mruanova0
Related