Error: Attempting to access the 'location' property of an undefined variable is not allowed when using res.redirect

Question

Error: Attempting to access the 'location' property of an undefined variable is not allowed when using res.redirect

Here is a function that retrieves an object from a database and extracts a URL:

async fetchUrl(id: string, redirectFunction: Function) {
    if (!IdExists(id)) {
      throw new Error(`ID ${id} does not exist.`);
    }
    const redirectLocation: string = await prisma.url.findUnique({
        where: { uniqueId: id },
        select: { url: true },
    }).then((data) => {
        return data?.url!;
    });

    redirectFunction('http://' + redirectLocation); 
}

This function is called within the following code segment:

app.get('/:id', async (req, res) => {
    try {
      redirectController.fetchUrl(req.params.id, res.redirect);
    } catch (error) {
      console.error(error);
    } 
});

There seems to be a

TypeError: Cannot read properties of undefined (reading 'location')

error related to the res.redirect method. However, when replacing it with console.log for debugging, the URL is displayed correctly. What could be causing this issue?

javascript typescript express

Answer 1

Answer №1

When you use this line of code:

redirectController.redirect(req.params.id, res.redirect);

You are passing res.redirect (a function reference) as the second argument. However, only the function is passed, causing the res to be lost when trying to call it later. This results in the method having an incorrect this value when executed, leading to various issues.

This problem can be fixed in multiple ways. One solution is to use .bind():

redirectController.redirect(req.params.id, res.redirect.bind(res));

.bind() creates a stub function that retains the value of res, ensuring that the correct res reference is used when calling the function and maintaining the correct this value inside the function.

Another approach is to create a custom stub function:

redirectController.redirect(req.params.id, (...args) => {
   res.redirect(...args);
});

With this method, your stub function invokes res.redirect() correctly and passes any arguments received from the controller.

To demonstrate this concept, consider the following example:

const obj = {
    greeting: "Hello",
    talk: function() {
        if (this && this.greeting) {
            console.log(`this.greeting is "${this.greeting}"`);
        } else {
            console.log("value of this is wrong");
        }
    }
}

console.log("calling as obj.talk()");
obj.talk();                             // works

console.log("-------------------------");

// function we pass a method to and then call that method
function callTalk(fn) {
     fn();
}

console.log("calling by passing method to another function");
callTalk(obj.talk);                     // doesn't work

// call it using .bind()
console.log("-------------------------");
console.log("calling using .bind()");
callTalk(obj.talk.bind(obj));           // works

Answer 2

When you use this line of code:

redirectController.redirect(req.params.id, res.redirect);

You are passing res.redirect (a function reference) as the second argument. However, only the function is passed, causing the res to be lost when trying to call it later. This results in the method having an incorrect this value when executed, leading to various issues.

This problem can be fixed in multiple ways. One solution is to use .bind():

redirectController.redirect(req.params.id, res.redirect.bind(res));

.bind() creates a stub function that retains the value of res, ensuring that the correct res reference is used when calling the function and maintaining the correct this value inside the function.

Another approach is to create a custom stub function:

redirectController.redirect(req.params.id, (...args) => {
   res.redirect(...args);
});

With this method, your stub function invokes res.redirect() correctly and passes any arguments received from the controller.

To demonstrate this concept, consider the following example:

const obj = {
    greeting: "Hello",
    talk: function() {
        if (this && this.greeting) {
            console.log(`this.greeting is "${this.greeting}"`);
        } else {
            console.log("value of this is wrong");
        }
    }
}

console.log("calling as obj.talk()");
obj.talk();                             // works

console.log("-------------------------");

// function we pass a method to and then call that method
function callTalk(fn) {
     fn();
}

console.log("calling by passing method to another function");
callTalk(obj.talk);                     // doesn't work

// call it using .bind()
console.log("-------------------------");
console.log("calling using .bind()");
callTalk(obj.talk.bind(obj));           // works

Error: Attempting to access the 'location' property of an undefined variable is not allowed when using res.redirect

Answer №1

Similar questions

Is there a method to retrieve Mui state classes easily?

Display the output of a run script within an HTML div element

Controlling SVG elements within React

Service failure occurs due to the inability to inject a factory

What is the best approach for managing caching effectively?

Error message received while converting webm video to images using Kagami/ffmpeg.js: Unable to locate an appropriate output format for '%04d.jpg'

Tool tips not displaying when the mouse is moved or hovered over

Using HTML5 Canvas to draw intersecting polygons

Retrieving Ajax Data Using C#

Creating Production Files for Web using RxJs and TypeScript

Tips for preventing hcaptcha from displaying image challenges during web scraping with puppeteer

Struggling to receive information from a third-party API using a token in a React application

A guide on handling POST response body parsing in NodeJS

Guide on exporting data from ejs files to a pdf file using pdfkit in a node js environment

Error with Bootstrap 4 tabs and JavaScript AJAX implementation

Tips on patiently awaiting the completion of resource loading

Upon loading the page on a mobile device, simply scroll down to locate the div positioned at the center of the page

Transforming HTML into a Console Experience (Angular 16)

Utilizing aria-role in Material UI's <Icon> component for enhanced accessibility

What is the best location for data validation in Express (and MySQL)?