ReferenceError: fetch is not defined

Question

I have this error when I compile my code in node.js, how can I fix it?

RefernceError: fetch is not defined

This is the function I am doing, it is responsible for recovering information from a specific movie database.

function getMovieTitles(substr){  
  pageNumber=1;
  let url = 'https://jsonmock.hackerrank.com/api/movies/search/?Title=' + substr + "&page=" + pageNumber;
  fetch(url).then((resp) => resp.json()).then(function(data) {
    let movies = data.data;
    let totPages = data.total_pages;
    let sortArray = [];
    for(let i=0; i<movies.length;i++){
        sortArray.push(data.data[i].Title);
     }
    for(let i=2; i<=totPages; i++){
           let newPage = i;
           let url1 = 'https://jsonmock.hackerrank.com/api/movies/search/?Title=' + substr + "&page=" + newPage;

          fetch(url1).then(function(response) {
              var contentType = response.headers.get("content-type");
              if(contentType && contentType.indexOf("application/json") !== -1) {
                return response.json().then(function(json) {
                  //console.log(json); //uncomment this console.log to see the JSON data.

                 for(let i=0; i<json.data.length;i++){
                    sortArray.push(json.data[i].Title);
                 }

                 if(i==totPages)console.log(sortArray.sort());

                });
              } else {
                console.log("Oops, we haven't got JSON!");
              }
            });

        }
  })
  .catch(function(error) {
    console.log(error);
  });   
}

Alfaro

Welcome to SO, please provide the details on what have you tried so far? Please provide a Minimal, Complete, and Verifiable example wherever required. Also please take the time to read How to Ask – Attorn

fetch is not a standard nodejs method - you need node-fetch – Quemoy

fetch() was designed for the browser and then back-ported to node.js in a third party module whcih you are apparently missing. The request() or request-promise() library is more natively built for node.js and supports a much wider range of options for node.js including streams, a zillion authentication methods, etc... – Lye

Please, don’t include an image of your error. See: meta.#286051 – Desuetude

Answer 1

If you're using a version of Node prior to 18, the fetch API is not implemented out-of-the-box and you'll need to use an external module for that, like node-fetch.

Install it in your Node application like this

npm install node-fetch

then put the line below at the top of the files where you are using the fetch API:

import fetch from "node-fetch";

---

If your application cannot be updated to use ESM (aka import syntax), and you need to use CommonJS (aka require), then stick with v2 of node-fetch. As per their README, v2 will continue to receive critical bug fixes.

npm install node-fetch@2

and then this will work,

const fetch = require("node-fetch");

Otiliaotina

Following these instructions, I had to save my file with the .mjs extension to make it work. – Newmarket

The Fetch API has been implemented in Node and should be released in a year or so. – Etam

it is, from node v18 fetch is available at global scope – Hill

Thanks for the comment, @LukasLiesis. I made a small edit to account for the addition of the fetch API in Node 18. – Otiliaotina

2022 UPDATE: Node released 'node version 18' which allows you to use fetch without any extra packages like 'node-fetch'. – Deadlock

Answer 2

This is a quick dirty fix, please try to eliminate this usage in production code.

If fetch has to be accessible with a global scope

import fetch from 'node-fetch'
globalThis.fetch = fetch

Mccain

This was the only way that I was able to get WebStorm to recognize the promise returned by fetch and autocomplete the available methods. Agreed that it should be avoided in production, but very helpful for local dev! – Despair

@Despair This is how you could have still IntelliSense without having it global defined: const nodeFetch = require('node-fetch') as typeof fetch; – Words

globalThis is not defined – Explain

use global.fetch = fetch @OlegAbrazhaev – Evante

Answer 3

You can use cross-fetch from @lquixada

Platform agnostic: browsers, node or react native

Install

npm install --save cross-fetch

Usage

With promises:

import fetch from 'cross-fetch';
// Or just: import 'cross-fetch/polyfill';

fetch('//api.github.com/users/lquixada')
  .then(res => {
    if (res.status >= 400) {
      throw new Error("Bad response from server");
    }
    return res.json();
  })
  .then(user => {
    console.log(user);
  })
  .catch(err => {
    console.error(err);
  });

With async/await:

import fetch from 'cross-fetch';
// Or just: import 'cross-fetch/polyfill';

(async () => {
  try {
    const res = await fetch('//api.github.com/users/lquixada');

    if (res.status >= 400) {
      throw new Error("Bad response from server");
    }

    const user = await res.json();

    console.log(user);
  } catch (err) {
    console.error(err);
  }
})();

Narcisanarcissism

This helped for metaweather api, well explained in github documentation. Thanks for Sharing – Disinfest

Using crossfetch's polyfill also worked for me using typescript and node and receiving the ReferenceError: fetch is not defined error from amazon-cognito-identity-js. – Classis

Answer 4

If you want to avoid npm install and not running in browser, you can also use nodejs https module;

const https = require('https')
const url = "https://jsonmock.hackerrank.com/api/movies";
https.get(url, res => {
  let data = '';
  res.on('data', chunk => {
    data += chunk;
  });
  res.on('end', () => {
    data = JSON.parse(data);
    console.log(data);
  })
}).on('error', err => {
  console.log(err.message);
})

Starting node version 18, Fetch API is available (Stable in version 21.x) https://nodejs.org/docs/latest-v21.x/api/globals.html#fetch

// Promise version:

const url = "https://jsonmock.hackerrank.com/api/movies";

fetch(url).then(res => {
    return res.json();
}).then(data => {
    console.log('DATA: ', data);
})

OR

// async/await version

const url = "https://jsonmock.hackerrank.com/api/movies";

const getData = async () => {
    const response = await fetch(url);

    if (response.ok) {
        const data = await response.json();

        console.log('DATA: ', data);
    }
};
getData();

Akkerman

Just remember to add .end() right at the bottom of this snippet to actually start the request off. See docs – Project

Answer 5

fetch came to Node v17 under experimental flag --experimental-fetch

It will be available in Node v18 without the flag.

https://github.com/nodejs/node/pull/41749#issue-1118239565

You no longer need any additional package to be installed

Stickup

Node 18 is out, and it is still experimental. – Listless

I use node v 18 in my local env and fetch just works on the server. On Netlify with v18 however it does not work. I need node-fetch. – Hutto

Answer 6

EDITED - New Solution

To use the latest version (3.0.0) you must do the import like this:

const fetch = (url) => import('node-fetch').then(({default: fetch}) => fetch(url));

---

---

Old Anwser:

This may not be the best solution, but if you install this version :

npm install [email protected]

you can now use the line below without error's.

const fetch = require("node-fetch");

Heloise

Is there a specific reason to use this older version instead of using the latest one, especially noting this vulnerability with it? – Econometrics

@Econometrics When I had this problem this was a quick fix I did. If you use the new version(3.0.0) , it will get an error in import and then you'll get another one that says "fetch is not a function". As you said, this version has vulnerabilities and you should always use the latest one, so I edited my answer to solve the problem. – Eiser

In your code (new one) the Promise will not work. If you need to use require go with version 2 which will get critical updates: "If you cannot switch to ESM, please use v2 which remains compatible with CommonJS. Critical bug fixes will continue to be published for v2." node-fetch@2 – Bostic

Answer 7

Node.js hasn't implemented the fetch() method, but you can use one of the external modules of this fantastic execution environment for JavaScript.

In one of the other answers, "node-fetch" is cited and that's a good choice.

In your project folder (the directory where you have the .js scripts) install that module with the command:

npm i node-fetch --save

Then use it as a constant in the script you want to execute with Node.js, something like this:

const fetch = require("node-fetch");

Porcia

require() of ES module is not supported – Chadwickchae

use import fetch from 'node-fetch' instead of const foo = require('foo') and add the following line to your package.json file: "type": "module". – Pinon

Answer 8

You should add this import in your file:

import * as fetch from 'node-fetch';

And then, run this code to add the node-fetch:
$ yarn add node-fetch

If you're working with typescript, then install node-fetch types:
$ yarn add @types/node-fetch

Wattle

If I import in this way and use typescript, I have this error TS2349: This expression is not callable. Type 'typeof import("/node_modules/@types/node-fetch/index")' has no call signatures.. It works only with require. – Explain

run $ yarn add @types/node-fetch to installing node-fetch types – Wattle

of course I did, it is about using es6 import vs require. seems like node-fetch does not support this modern import syntaxis. – Explain

Answer 9

You have to use the isomorphic-fetch module to your Node project because Node does not contain Fetch API yet. For fixing this problem run below command:

npm install --save isomorphic-fetch es6-promise

After installation use below code in your project:

import "isomorphic-fetch"

Pregnant

Not actively maintained; has been years since the last accepted PR. github.com/matthew-andrews/isomorphic-fetch/graphs/contributors – Dividers

FYI, this can lead to difficult in typescript projects because this library does not provide proper types. An easier router is to use cross-fetch which is very similar but plays nice with typescript. For a react app where you are assuming that normal fetch will be available in the browser you can make this a dev dependency and use import 'cross-fetch/polyfill'; in test setup to smooth the rough edges of the testing environment. – Scimitar

Answer 10

For those also using typescript on node-js and are getting a ReferenceError: fetch is not defined error

npm install these packages:

    "node-fetch": "^2.3.0"

Then include:

import Global = NodeJS.Global;
export interface GlobalWithCognitoFix extends Global {
    fetch: any
}
declare const global: GlobalWithCognitoFix;
global.fetch = require('node-fetch');

Lienlienhard

amazon-cognito-identity-js is not relevant to this question and not needed to install to solve this error. It is also not related to typescript. – Aggrieve

Hi! So i am having exactly the same issue, but this still din't fix anything, do you have any other work around? – Pallet

I'm also looking for a work-around. Doing import fetch from 'node-fetch'; instead is one fix for typescript – Gnosticize

Answer 11

Best one is Axios library for fetching. use npm i --save axios for installng and use it like fetch, just write axios instead of fetch and then get response in then().

Ragtime

This is happening more in build time, while your comment is good, the problem is different to what you proposed – Socinus

Answer 12

It seems fetch support URL scheme with "http" or "https" for CORS request.

Install node fetch library npm install node-fetch, read the file and parse to json.

const fs = require('fs')
const readJson = filename => {
  return new Promise((resolve, reject) => {
    if (filename.toLowerCase().endsWith(".json")) {
      fs.readFile(filename, (err, data) => {
        if (err) {
          reject(err)
          return
        }
        resolve(JSON.parse(data))
      })
    }
    else {
      reject(new Error("Invalid filetype, <*.json> required."))
      return
    }
  })
}

// usage
const filename = "../data.json"
readJson(filename).then(data => console.log(data)).catch(err => console.log(err.message))

Viddah

Answer 13

In HackerRank, some libraries are installed by default and some are not.

Because it is running Node.js, the fetch API is not installed by default.

The best thing for you to do is to check whether the libraries are or not installed.

on the top of the exercise, there is the following:

const https = require('https');

Please try to add this to the top as well:

const axios = require('axios');

and then run the code.

If there is a compilation error, then it's not available, otherwise you can use axios, which is a good alternative to fetch

To use it with then, you can:

function getMovieTitles(substr){
  axios.get(url)
    .then(function(response){
      console.log(response.data);
    })
}

or taking advantage of the async/await

async function getMovieTitles(substr){
  let response = await axios.get(url)
  console.log(response.data);
}

Halidom

axios is not the mdn standard fetch. question doesn't mention alt – Yield

Answer 14

In node.js you can use : node-fetch package

npm i node-fetch

then :

import fetch from 'node-fetch';

here is a full sample in (nodejs) :

import fetch from "node-fetch";

const fetchData = async () => {
  const res = await fetch("https://restcountries.eu/rest/v2/alpha/col"); // fetch() returns a promise, so we need to wait for it

  const country = await res.json(); // res is now only an HTTP response, so we need to call res.json()

  console.log(country); // Columbia's data will be logged to the dev console
};

fetchData();

Dupin

Answer 15

This is the related github issue This bug is related to the 2.0.0 version, you can solve it by simply upgrading to version 2.1.0. You can run npm i [email protected]

Uwton

Answer 16

I encountered this error when I deployed my docker instance to production. It was weird to see the application failed with the error in this question.

I realised the Dockerfile had FROM node:16.13.1 and my system node version was 20.3.1.

If you don't want to use 'node-fetch' as shown in many answers and use 'fetch' ensure that you're using node version 18 or above. The reference error is likely because your node version is less than 18.

Dysphasia

Answer 17

The following works for me in Node.js 12.x:

npm i node-fetch;

to initialize the Dropbox instance:

var Dropbox = require("dropbox").Dropbox;
var dbx = new Dropbox({
   accessToken: <your access token>,
   fetch: require("node-fetch")    
});

to e.g. upload a content (an asynchronous method used in this case):

await dbx.filesUpload({
  contents: <your content>,
  path: <file path>
});

Lucrece

Answer 18

This worked for me:

const nodeFetch = require('node-fetch') as typeof fetch;

Birdman

Answer 19

npm i node-fetch 

Once installed, in your JavaScript file:

import fetch from "node-fetch";

Lastly make this change package.json file:

"type": "module"

Camiecamila

Answer 20

For me these are looking more simple.

npm install node-fetch

import fetch from "node-fetch";

Butterfly

Answer 21

I got this error in a Jest test when using native fetch in Node.js version 18(.15.0).

Upgrading to the latest version of Jest (in my case from 27.5.1 to 29.5.0) fixed the issue:

npm install jest@latest

Infracostal

Answer 22

There are actually a lot of different libraries for making fetch available in the browser.

The main ones I'm aware of are:

• node-fetch
• cross-fetch
• whatwg-fetch
• isomorphic-fetch

I currently use node-fetch, and it has worked fine, but I don't really know which one is "the best". (though the openbase.com pages I linked to provide some metadata on usage [eg. Github stars, npm downloads], which can help)

Kentkenta

Answer 23

Solution without installations

Method 1

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

constructor(@Inject(PLATFORM_ID) private platformId: Object) { 
    // constructor code
}

ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
        // Client only code. Any javascript base functions
    }
    if (isPlatformServer(this.platformId)) {
        // Server only code. Any javascript base functions
    }
}

Method 2

import {  PLATFORM_ID} from '@angular/core';
    import { isPlatformBrowser } from '@angular/common';
    
    @Component({
      selector: 'app-navigation',
      templateUrl: './navigation.component.html',
      styleUrls: ['./navigation.component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class NavigationComponent implements OnInit {
      private isBrowser: boolean = false;
    
      constructor(
        @Inject(PLATFORM_ID) private platformId: Object
      ) {
        this.isBrowser = isPlatformBrowser(platformId);
      }
    
      ngOnInit(): void {
          if (this.isBrowser) {
            fetch('https://jsonplaceholder.typicode.com/posts/1')
                .then((response) => response.json())
                .then((json) => console.log(json));
            }
        }
      }

DEMO - JSFIDDLE - Open console to view the fetch api service working

Pablopabon

Answer 24

Just make your app.js file Extension as app.mjs and the problem will be solved!!!:)

Zelazny

Answer 25

Might sound silly but I simply called npm i node-fetch --save in the wrong project. Make sure you are in the correct directory.

Bambibambie

You must not --save what is required only for tests. Use --save-dev instead. – Inexpressible

Answer 26

If need install:

npm install --save global-fetch

then

var fetch = require("node-fetch");

Vlad

Is it global-fetch or node-fetch? – Wulf

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Higherup