Skip to main content

How to Resolve "ReferenceError: XMLHttpRequest is not defined" Error in JavaScript

The ReferenceError: XMLHttpRequest is not defined is a common error in JavaScript that occurs when you try to use the XMLHttpRequest object in an environment where it does not exist. This is a clear signal that you are attempting to run browser-specific code in a Node.js (server-side) environment.

This guide will explain the fundamental reason this error happens and walk you through the modern, standard solutions for making HTTP requests in Node.js, including the native fetch() API and the popular axios library.

The Core Problem: Browser APIs vs. the Node.js Environment​

It's crucial to understand the two different environments where JavaScript runs:

  • The Browser (Client-Side): Provides a specific set of global APIs for interacting with a web page and making web requests. XMLHttpRequest (and the more modern fetch) is a built-in browser API for this purpose.
  • Node.js (Server-Side): This is a JavaScript runtime that runs on a server. It has its own set of built-in APIs for server-side tasks, like fs (file system) and http (for creating servers). It does not have the browser's XMLHttpRequest object in its global scope.

The error is the Node.js runtime telling you, "I don't know what XMLHttpRequest is because it's not part of my built-in APIs."

Modern versions of Node.js (v18 and later) now include a globally available, browser-compatible fetch() API. This is the recommended best practice for making HTTP requests in Node.js as it allows you to write "isomorphic" code that can run in both browser and server environments.

Problem: you are trying to make an HTTP request in a Node.js script.

// PROBLEM: This is a browser-only API.
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.send();

Solution: use the globally available fetch() function.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Could not fetch data:', error);
  }
}

fetchData();
note

This approach is clean, modern, and requires no external libraries in up-to-date Node.js versions.

For many years, axios has been the most popular third-party library for making HTTP requests in both Node.js and the browser. It provides a user-friendly API with helpful features like automatic JSON parsing and better error handling.

Solution:

  1. Install axios: 
    npm install axios
  2. Use axios in your code: 
    import axios from 'axios';

    async function fetchData() {
      try {
        // axios automatically parses JSON and throws an error for bad statuses.
        const response = await axios.get('https://api.example.com/data');
        console.log(response.data); // Data is in `response.data`
      } catch (error) {
        console.error('Could not fetch data:', error.message);
      }
    }

    fetchData();
note

axios is an excellent and robust choice, especially for complex applications.

The Direct Polyfill (for Legacy Code): Using xhr2​

If you are migrating old, browser-based code to Node.js and need a "drop-in" replacement for XMLHttpRequest without refactoring to fetch or axios, you can use a polyfill library like xhr2.

Solution:

  1. Install xhr2: 
    npm install xhr2
  2. Import it to create the XMLHttpRequest global: 
    import XMLHttpRequest from 'xhr2';

    // This code now works in Node.js because we've imported a polyfill.
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.example.com/data');
    xhr.onload = function() {
      if (xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
      }
    };
    xhr.send();
note

This is a good solution for legacy compatibility, but fetch or axios are recommended for new projects.

A Note on Misspellings​

A less common but possible cause of the error is a simple typo. The object name is case-sensitive: XMLHttpRequest.

  • xmlHttpRequest (lowercase 'x' or 'h') will cause a ReferenceError.
  • XMLHTTPRequest (all caps) will also fail.

Ensure the name is spelled and cased correctly.

Conclusion​

The ReferenceError: XMLHttpRequest is not defined error is a clear indicator of an environment mismatch.

  • You cannot use XMLHttpRequest directly in Node.js. It is a browser-only API.
  • The recommended modern solution for making HTTP requests in Node.js is the native fetch() API (available in Node.js v18+).
  • A very popular and robust alternative is the axios library.
  • If you specifically need to run code that was written for the browser's XMLHttpRequest API, you can use a polyfill like xhr2.

Table of Contents