Resolving the “ReferenceError: fetch is not defined” in Node.js

When diving into the world of JavaScript and Node.js, developers often encounter the perplexing "ReferenceError: fetch is not defined" error. This article provides a comprehensive guide to understanding and resolving this common issue, ensuring a smoother development experience.

Deciphering the fetch API

The fetch API stands as a cornerstone for making HTTP requests in JavaScript. It's a modern, robust, and versatile tool that facilitates fetching resources, including over the network. Built on the foundation of the Promise API, it simplifies handling asynchronous operations and gracefully managing errors.

Why the “ReferenceError: fetch is not defined”?

Although the fetch API is a native feature in contemporary browsers, it's absent in older Node.js versions. This absence is the root cause of the error, as Node.js lacks an in-built fetch implementation.

The Solution: Embracing node-fetch

The renowned node-fetch package comes to the rescue, offering a streamlined fetch implementation tailored for Node.js.

Step 1: Installation

Kickstart by installing the node-fetch package:

npm install node-fetch

For those on older Node.js versions, opt for version 2:

npm install node-fetch@2

Step 2: Integration

Post-installation, seamlessly integrate node-fetch into your Node.js project:

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

With this, the fetch API becomes as accessible as in browser settings.

Fetch in Action: A Quick Example

Here's a snapshot of utilizing node-fetch for a basic GET request:

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

fetch('https://api.example.com/data-endpoint')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Making POST requests with fetch

To initiate a POST request, furnish an additional options object:

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

const postData = {
  key1: 'value1',
  key2: 'value2',
};

fetch('https://api.example.com/data-endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(postData),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Efficient error handling with fetch

The fetch API only rejects promises on network errors. For HTTP errors, inspect the response.ok property:

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

fetch('https://api.example.com/data-endpoint')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Efficiently Handling Timeouts

In real-world scenarios, it's crucial to handle potential timeouts when making requests. This ensures that your application remains responsive even if a server takes too long to respond.

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

const fetchWithTimeout = async (url, options, timeout = 5000) => {
  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout);

  const response = await fetch(url, {
    ...options,
    signal: controller.signal
  });
  clearTimeout(id);

  return response;
};

fetchWithTimeout('https://api.example.com/data-endpoint', {}, 10000)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Request timed out');
    } else {
      console.error('Error:', error);
    }
  });

Streamlining Large Requests

For handling large requests, it's beneficial to stream the data. This approach ensures efficient memory usage and faster processing times.

const fetch = require('node-fetch');
const fs = require('fs');

fetch('https://api.example.com/large-data-endpoint')
  .then(response => {
    const fileStream = fs.createWriteStream('output.txt');
    response.body.pipe(fileStream);
  })
  .catch(error => console.error('Error:', error));

Handling Redirects

By default, the fetch API follows redirects. However, you might want to capture the redirect URL or prevent automatic following.

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

fetch('https://api.example.com/redirect-endpoint', {
  redirect: 'manual'
})
  .then(response => {
    if (response.type === 'opaqueredirect') {
      console.log('Redirected to:', response.url);
    } else {
      return response.json();
    }
  })
  .then(data => data && console.log(data))
  .catch(error => console.error('Error:', error));

Wrapping Up

Understanding and resolving the "ReferenceError: fetch is not defined" error in Node.js becomes effortless with the right tools and knowledge. By leveraging the node-fetch package or its alternatives, developers can harness the power of the fetch API in their Node.js endeavors. Dive into the official node-fetch documentation for a deeper dive and advanced techniques. Here's to error-free coding!

FAQs

How do I handle cookies with fetch in Node.js?

The fetch API doesn't handle cookies by default. For cookie handling, consider using libraries like tough-cookie in conjunction with node-fetch.

Can I monitor request progress?

Yes, by listening to the data event on the response body, you can monitor the progress of a request, especially useful for large data transfers.

Is there a way to cancel a fetch request?

Absolutely! Using the AbortController class, you can initiate an abort signal and cancel the fetch request.

How do I handle different response types?

The fetch API provides methods like .json(), .text(), and .blob() to handle different response types. Choose the method that aligns with the expected response format.