ReferenceError: fetch is not defined in NodeJs

If you’ve encountered the error “ReferenceError: fetch is not defined” while trying to use the fetch API in a Node.js environment, you may be wondering how to fix it.

This error occurs because the fetch API is not natively supported in Node.js, and must be imported in order to be used. In this article, we’ll explore several solutions for solving this error and getting your fetch calls to work as expected.

[Fixed]: JSX expressions must have one parent element in React

Solution 1: Install and import the node-fetch package

The most straightforward solution to this error is to install and import the node-fetch package, which provides a fetch() compatible API in the Node.js runtime. Here’s how to do it:

Step 1: Create a package.json file

First, make sure you have a package.json file in your project’s root directory. If not, run the following command to create one:

npm init -y

Step 2: Install the node-fetch library

Next, install the node-fetch library by running the following command:

npm install node-fetch

Step 3: Import and use the node-fetch module

You can now import and use the node-fetch module just like you would use the fetch() method in the browser. For example:

import fetch from 'node-fetch';async function getUser() {  try {    const response = await fetch('https://randomuser.me/api/');    if (!response.ok) {      throw new Error(`Error! status: ${response.status}`);    }    const result = await response.json();    return result;  } catch (err) {    console.log(err);  }}console.log(await getUser());

Note that the more recent versions of the node-fetch package are only compatible with the ES6 Modules syntax of import/export.

If you’re using an older version of Node.js and want to use the required syntax instead, you’ll need to install version 2 of the node-fetch package by running the following command:

npm install node-fetch@2

Then, you can import the fetch package using the older require function, like so:

const fetch = require('node-fetch');async function getUser() {  try {    const response = await fetch('https://randomuser.me/api/');    if (!response.ok) {      throw new Error(`Error! status: ${response.status}`);    }    const result = await response.json();    return result;  } catch (err) {    console.log(err);  }}

It’s worth noting that it’s generally best to use consistent import syntax between your client and server-side code, but this approach can be useful if you need to support an older version of Node.js.

Solution 2: Use a polyfill to get rid of this error

Another solution to this error is to use a polyfill, which is a piece of code that provides missing functionality in older environments.

One popular polyfill for the fetch API is the isomorphic-fetch package, which can be installed and used as follows:

Step 1: Install the isomorphic-fetch package

First, install the isomorphic-fetch package by running the following command:

npm install isomorphic-fetch

Step 2: Import the isomorphic-fetch package

Next, import the isomorphic-fetch package at the top of your JavaScript file:

import 'isomorphic-fetch';

Step 3: Use the fetch function as usual

You can now use the fetch function as usual, without encountering the “ReferenceError: fetch is not defined” error. For example:

async function getUser() {  try {    const response = await fetch('https://randomuser.me/api/');    if (!response.ok) {      throw new Error(`Error! status: ${response.status}`);    }    const result = await response.json();    return result;  } catch (err) {    console.log(err);  }}console.log(await getUser());

Solution 3: Use a different HTTP library

If you’re not set on using the fetch API, you can also consider using a different HTTP library that is natively supported in Node.js. Some popular options include the following:

Axios

Axios is a Promise-based HTTP client that can be used in the browser and in Node.js. To install and use Axios, follow these steps:

Step 1: Install the axios package

First, install the axios package by running the following command:

npm install axios

Step 2: Import the axios package

Next, import the axios package at the top of your JavaScript file:

import axios from 'axios';

Step 3: Use the axios function as usual

You can now use the axios function to make HTTP requests. For example:

async function getUser() {  try {    const response = await axios.get('https://randomuser.me/api/');    if (!response.ok) {      throw new Error(`Error! status: ${response.status}`);    }    return response.data;  } catch (err) {    console.log(err);  }}console.log(await getUser());

Request

Request is a simplified HTTP client that can be used in the browser and in Node.js. To install and use Request, follow these steps:

Step 1: Install the request package

First, install the request package by running the following command:

npm install request

Step 2: Import the request package

Next, import the request package at the top of your JavaScript file:

import request from 'request';

Step 3: Use the request function as usual

You can now use the request function to make HTTP requests. For example:

async function getUser() {  try {    const response = await new Promise((resolve, reject) => {      request('https://randomuser.me/api/', (error, res, body) => {        if (error){          reject(error);}else {resolve(res);}});});if (!response.ok) {  throw new Error(`Error! status: ${response.statusCode}`);}return JSON.parse(response.body);} catch (err) {console.log(err);}}console.log(await getUser());

Conclusion

In this article, we’ve explored several solutions for solving the “ReferenceError: fetch is not defined” error in Node.js. By installing and importing the node-fetch package, using a polyfill, or using a different HTTP library, you can get your fetch calls working as expected and move on with your project.