Error in Netlify YouTube tutorial for Serverless functions

Support
1

details
Current site: boisterous-malasada-e1fa38
Netlify TOML: /home/dean/projects/gatsby/tutorial/netlify-serverless-tutorial/netlify.toml
Admin URL: Netlify App
Site URL: https://boisterous-malasada-e1fa38.netlify.app
Site Id: 67e5ed71-e81b-44ba-a55a-5cd00d022097

I’m trying to do the “Up and Running with Serverless Functions: Deploying Serverless Functions” tutorial from the Netlify Youtube Channel

I went through the process of building the application locally and it was working, I deployed it to Netlify successfully, but exmining the Network tab (following the tutorial video) I got the error discussed below. I tried making serveral changes suggested by Mr. Google. I tried both ‘ntl dev’ and ‘ntl serve’ along with a number of other ideas that didn’t work locally. The application deploys but does not work.

The problem appears to be with first line of the pokedex.js as shown in the turoial:

const fetch = require('node-fetch')

When I run the application and then click the fetch button (fetchPokedexBtn) I get the following error:

Request from ::1: GET /.netlify/functions/pokedex
{"level":"error","message":"End - Error:"}
{"errorMessage":"require() of ES Module /home/dean/projects/gatsby/tutorial/netlify-serverless-tutorial/node_modules/node-fetch/src/index.js from /home/dean/projects/gatsby/tutorial/netlify-serverless-tutorial/netlify/functions/pokedex.js not supported.\nInstead change the require of index.js in /home/dean/projects/gatsby/tutorial/netlify-serverless-tutorial/netlify/functions/pokedex.js to a dynamic import() which is available in all CommonJS modules." ...

Things I’ve tried:

const fetch = import('node-fetch').then(module => module.default);

const module = await import('node-fetch');
const fetch = module.default;

const {default: fetch} = await import('node-fetch');

2

@witcradg I’ve not watched the tutorial that you’re referring to, but if you’re using a more recent version of node you wouldn’t need to use the node-fetch package at all.

The native fetch API was added to node around Feb 2022, so you can just use fetch in node v18.

Here’s a random blog article I found with a quick google about it:

If you want to use the node-fetch package, you should take a look at the readme documentation here:

2 Likes
3

Simply removing the require from the serverless function (and npm removing it from package.json) allows me to use ntl dev to run the application function with the correct results.
Thank you very much. @nathanmartin

HOWEVER, when I push this to Netlify to deploy I get this error when I try to use the function:
{“errorType”:“ReferenceError”,“errorMessage”:“fetch is not defined”,“trace”:[“ReferenceError: fetch is not defined”," at Runtime.exports.handler (/var/task/pokedex.js:4:22)“,” at Runtime.handleOnceNonStreaming (file:///var/runtime/index.mjs:1085:29)"]}

FWIW I added NODE_VERSION to environment variables
3:41:17 PM: Now using node v18.12.1 (npm v8.19.2)

4

@witcradg What you have set, and what you’ve pasted in, is the node version for the CI build.

You need to adjust the node version that the serverless functions (AWS lambdas) execute with, so you’re looking for this:

1 Like
5

Perfect. Thank you very much @nathanmartin. I’ve written Netlify Functions in the past and didn’t have any trouble with it, so this is all new for me with Nodejs v18.

6

So there are two issues required to replace the tutorial code and get it working both thanks to nathanmartin. I’m consolidating these two solutions so I can mark a single post as the solution.
You should read the thread.

  1. if you’re using a more recent version of node you wouldn’t need to use the node-fetch package at all.
  2. Optional configuration for functions
1 Like
7

Thanks for sharing this witcradg!

8

@SamO I should add that while I discovered this on the youtube video, the same issue(s) exist with the documentation at

You might want to get this into somebody’s work queue :slight_smile:

9

Hi thanks for letting me know! Unfortunately blog posts because of the sheer of them aren’t updated and can frequently go out of date. Thanks for raising this1 (: