Fix - XMLHttpRequest is not defined Error in JavaScript

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

banner

Photo by Fabian Blank

Fix - XMLHttpRequest is not defined Error #

The "XMLHttpRequest is not defined" error occurs for 2 main reasons:

  1. Trying to use the XMLHttpRequest in a Node.js application (on the server side).
  2. Misspelling the XMLHttpRequest keyword (it's case sensitive).

javascript xmlhttprequest is not defined

First and foremost, check the spelling of the XMLHttpRequest word, there are quite a few places where you could make a typo.

The XMLHttpRequest() constructor which creates XMLHttpRequests is an object that's built in in the browsers, it's not included as a native module in Node.js (on the server).

To solve the "XMLHttpRequest is not defined" error, install an alternative package like node-fetch or axios, which are more recent and user friendly ways to interact with a server. If you need an XMLHttpRequest replacement that works in Node.js, use the xhr2 package.

This article includes examples of how to use the node-fetch, axios and xhr2 modules in your Node.js application.

Here's an example that uses the node-fetch module.

First install the module:

shell
npm install node-fetch

Now you can use the module in your Node.js code:

index.js
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, at the time of writing, to use ES6 module imports and exports in a NodeJs project, you have to set the type property to module in your package.json file:

package.json
{ "type": "module", // ... ๐Ÿ‘‡๏ธ rest }

The fetch method is also supported in browsers, so your client and server side code will be consistent.

Alternatively, you can use the popular axios module to make an HTTP request.

The axios package is also universal, you can use it on both the browser and the server.

First, install the module:

shell
npm install axios

Now you are able to use it:

index.js
import axios from 'axios'; async function getUser() { try { const response = await axios.get('https://randomuser.me/api/'); return response.data; } catch (err) { console.log(err); } } console.log(await getUser());

The axios package is quite nice in that it removes some of the boilerplate that comes with the fetch() method. It's a higher level abstraction that allows us to write less code.

Finally, if you need an XMLHttpRequest alternative that works in Node.js, use the xhr2 package.

First install the module:

shell
npm install xhr2

And use it in your Node.js code:

index.js
import XMLHttpRequest from 'xhr2'; function getUser() { const xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function logger() { if (this.readyState === 4 && this.status === 200) { console.log(this.responseText); } }; xhttp.open('GET', 'https://randomuser.me/api/', true); xhttp.send(); } getUser();

The XMLHttpRequest approach is quite more verbose and harder to read than either fetch or axios.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee