[FIXED] What is cancelToken by axios and how I fix it?

Issue

I made a React app and I making requests to the backend using Axios. I created a middleware in my backend for authorization and on the frontend side I'm trying to pass to every call that is made to the backend the auth token if exists in the localStorage. Before I added the logic for that everything worked perfectly, now every time I try to log in or register I get this in the console

TypeError: Cannot read properties of undefined (reading 'cancelToken')
    at throwIfCancellationRequested (dispatchRequest.js:12:1)
    at dispatchRequest (dispatchRequest.js:24:1)
    at async auth.js:6:1 

My index.js which handles every call to the backend looks like this:

import axios from 'axios';

const API = axios.create({
    baseURL: 'http://localhost:3500'
})


API.interceptors.request.use((req) => {
    if (localStorage.getItem('profile')) {
        req.headers.Authorization = `Bearer ${JSON.parse(localStorage.getItem('profile')).token}`
    }

})

export const fetchHunts = () => API.get('/hunts');

export const createHunt = (newHunt) => API.post('/hunts', newHunt);

export const updateHunt = (id, updatedHunt) => API.patch(`/hunts/${id}`, updatedHunt);

export const deleteHunt = (id) => API.delete(`/hunts/${id}`);


export const signInAdmin = (formData) => API.post('/admins/signinadmin', formData);
export const signUpAdmin = (formData) => API.post('/admins/signupadmin', formData);

Right now I am not logged in so there is no profile in the localStorage. I tried to add this, I found this here on stack overflow but didn't work

const CancelToken = Axios.CancelToken;
instance.interceptors.request.use(req => {
    /* some logic */
    const CancelToken = Axios.CancelToken;
    return {
        ...req,
        cancelToken: new CancelToken((cancel) => cancel('Cancel repeated request'))
    };
});

but when I used this it only returned " Cancel repeated request " and did nothing. Do you know how can I fix that? Thank you in advance!

Solution

Based on the Axios Documentation - Interceptors, the interceptor function should return the req.

API.interceptors.request.use((req) => {
    if(localStorage.getItem('profile')) {
        req.headers.Authorization = `Bearer ${JSON.parse(localStorage.getItem('profile')).token}`;
    }
    return req;
})

Answered By - Xiaoyang Liu

Answer Checked By - David Marino (PHPFixing Volunteer)