Must use import to load ES Module when installed node-fetch

[Siegrift]

This follows the video: https://explorers.netlify.com/learn/up-and-running-with-serverless-functions/integrate-with-a-third-party-api-with-serverless-functions

however you will get: Must use import to load ES Module. This is because node-fetch is now ESM only (see: https://github.com/node-fetch/node-fetch/blob/main/docs/v3-UPGRADE-GUIDE.md#converted-to-es-module)

You have two options (maybe more...):

• Use version 2.x and use commonJS
• Add esbuild as a bundler and use ESM (https://www.netlify.com/blog/2021/04/02/modern-faster-netlify-functions/)

[BenJackGill]

Thank you for this. But I'm still learning and not sure how to implement those options. Would you mind elaborating on how exactly to implement those options so we can follow along?

For example, I am trying the esbuild option.

1. I added [functions] node_bundler = "esbuild" to the toml file as advised in the blog post, but I was still getting the same error.
2. I then added "type": "module" to package.json as advised from StackOverflow. But still getting the same error.
3. I then changed the pokedex.js file from const fetch = require('node-fetch') to import { fetch } from 'node-fetch'. But still getting the same error.
4. I have now noticed that the error was referencing .netlify/functions-serve/pokedex/pokedex.js which uses require in the line module.exports = require('./src/netlify/functions/pokedex.js') so I think that is the problem. But I'm stuck here not knowing what I should change this to?

Also maybe all those steps were not needed and there was a simpler way of going about things?

Would love to hear your exact steps please :)

[Siegrift]

Hi,

1. I think adding just that should work, but maybe you need the step 2) as well
2. I have "type": "commonjs" in my package.json
3. I think it's because of incorrectly setting step 2
4. No, that should not be a problem (but maybe now is, since you enabled modules in step 2). The problem was with importing fetch using require (the commonjs way), but node fetch version 3.x can only be imported using import (the module way).

Maybe this working example will help: Siegrift/airnode-mocked-api-netlify@9b0d062

[BenJackGill]

Ok I figured it out. I was forgetting to relaunch with ntl dev after making the changes.

For anyone else that comes along, do this to fix the error:

1. Add [functions] node_bundler = "esbuild" to the toml as explained here: https://www.netlify.com/blog/2021/04/02/modern-faster-netlify-functions/
2. In pokedex.js change const fetch = require('node-fetch') to import fetch from 'node-fetch'. This new line uses ESM format instead of the commonjs format.
3. Then use the terminal command ntl dev to relaunch your site, and it should be working now.

You don't need to add or change "type" in the toml file.

These steps leave out all the other required stuff for installing fetch etc as described in the lesson. It's just some extra tweaks for getting over the Must use import to load ES Module error. You'll have to also follow along the tutorial to get it fully working.

Hope that helps!

[bencodezen]

Another option as well is to install node-fetch@2 in order to remove the esbuild issue. It's been rather painful with the ecosystem migration.

That said, I'm glad y'all figured it out!