Inspired by Andy Bell’s website, I set out to build a “Last listened to” element that pulled data from my Last.FM profile.

A quick dig around and the use of a custom element later I decided to use Netlify Functions, as my site is already hosted there.

The idea was that, my custom element would hit a function in Netlify, which in turn would hit the Last.FM API to get the tracks that I have been listening to.

  1. Last.FM API access setup ✅
  2. Custom element added to my site, styled and making a call ✅
  3. Basic Netlify function hosted and accessible, returning hardcoded data ✅
  4. Render web component with the data ✅
  5. Call Last.FM API from Netlify function 🔥

It turns out that calling an API from a Netlify function is not as easy as the documentation suggested.

require('node-fetch')

...

fetch("api-endpoint")
...

Solution

  • Netlify functions defaults to Node 12.8(I think it was .8 🤷‍♂️)
  • Node fetch v3 only works in Node >12.20
  • Node fetch v3 doesn’t support require syntax
  • Node fetch v2 doesn’t support import syntax
  • Netlify CLI was great but had the classic “works on my machine” problem
  • Setting the Node version in Netlify wasn’t easy 🤷‍♂️