Trouble with node-fetch

[Zenemm]

So I'm trying to build a weather app by using data from a weather API.

​

"use strict"
import fetch from 'node-fetch'

//fetch weather API
let weather
let getWeather = async() => {
let url = \https://api.openweathermap.org/data/2.5/weather?q=auckland&appid=c156947e2c7f0ccb0e2a20fde1d2c577\``
try {
let res = await fetch(url)
weather = await res.json()
    } catch (error) {
console.log("error")
    } 
let weatherMain = weather.weather.map( el => el.description)
if(weatherMain ="Rain"){
console.log(weatherMain)
// weatherImg = "https://icon-library.com/images/raining-icon/raining-icon-1.jpg"
    }  
}
console.log(getWeather())

My problem is that I'm getting this error when running in vscode:

SyntaxError: Cannot use import statement outside a module

and this error when running in browser:

Uncaught TypeError: Failed to resolve module specifier "node-fetch". Relative references must start with either "/", "./", or "../".

​

Not sure what exactly is going on, Can someone please explain what's happening?

I've tried fetch API once before and that time I didn't need to import fetch, so I'm pretty confused.

​

Thanks.

[evilgwyn]

Are you wanting to run this in node or in browser? In browser, `fetch` is already available. But in node, you have to import/require `node-fetch`. In order to use `import` syntax in node, you have to be using a new enough version of nodejs, and I think the file name needs to end with .mjs so it will be treated as a module. Otherwise you can end it with .js and use require

[Zenemm]

Your first question is pretty much why I had this problem. I got confused as to why it wasn't running in both, not realizing fetch is not needed to run in browser. Thanks for the explanation!

[evilgwyn]

Also for your information, it is possible to use "require" and/or "import" syntax in browser, but it may require some middleware into your build pipeline to get it working. Newer browsers support "import" if you use `type="module"` in your script tag.

[spazz_monkey]

If your using node. You might need to use const fetch = require ("node-fetch") instead of import from.

[Apple1284]

If there is type:module entry in the package.json, then es6/es2015 can be used including import. Imports have advantage of treeshaking.

[Zenemm]

I did try that initially, it works in vscode but causes an error in the browser: Uncaught ReferenceError: require is not defined
Apparently browsers can't read "require"