This is the code from the freecodecamp tutorial (/), the code is meant for react but my project is for next js and when I run it in the react project I don't get this error but when I run it in the next js project I get the error:

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

The code where the error is occurring according to the error message.

axios
        .request(options)
        .then(function (response) {
            console.log("res.data", response.data);
            const token = response.data.token;
            checkStatus(token);
        })
        .catch((err) => {
            let error = err.response ? err.response.data : err;
            // get error status
            let status = err.response.status;
            console.log("status", status);
            if (status === 429) {
                console.log("too many requests", status);

                showErrorToast(
                    `Quota of 100 requests exceeded for the Day! Please read the blog on freeCodeCamp to learn how to setup your own RAPID API Judge0!`,
                    10000
                );
            }
            setProcessing(false);
            console.log("catch block...", error);
        });
};

This is the code from the freecodecamp tutorial (https://www.freecodecamp/news/how-to-build-react-based-code-editor/), the code is meant for react but my project is for next js and when I run it in the react project I don't get this error but when I run it in the next js project I get the error:

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

The code where the error is occurring according to the error message.

axios
        .request(options)
        .then(function (response) {
            console.log("res.data", response.data);
            const token = response.data.token;
            checkStatus(token);
        })
        .catch((err) => {
            let error = err.response ? err.response.data : err;
            // get error status
            let status = err.response.status;
            console.log("status", status);
            if (status === 429) {
                console.log("too many requests", status);

                showErrorToast(
                    `Quota of 100 requests exceeded for the Day! Please read the blog on freeCodeCamp to learn how to setup your own RAPID API Judge0!`,
                    10000
                );
            }
            setProcessing(false);
            console.log("catch block...", error);
        });
};

• javascript
• next.js
• axios
• rapidapi

Share Improve this question Follow asked Jan 19, 2023 at 16:06 user7200977user7200977 5

• Is it the typo, you have let error... then err.response.status. Should it be error.response.status? – Djave Commented Jan 19, 2023 at 16:08
• Just in general though, it is saying it cannot read status of an undefined variable. That means in your code, err.response is undefined. Try console logging err right at the top of the catch((err)) => { console.log(err) and see if you can find a status property – Djave Commented Jan 19, 2023 at 16:11
• if you remove everything in that catch block except console.log(err) you get undefined? I don't think you do, otherwise I'm pretty sure the error would say Cannot read properties of undefined (reading 'response') – Djave Commented Jan 19, 2023 at 16:20
• I think I figured out the problem, I think that the problem is that before this code I tried to pull some api keys from .env file which aren't getting pulled from there. However I am not sure about how to get a variable from the .env file. – user7200977 Commented Jan 19, 2023 at 16:23
• Thats good, maybe best to start a new question. Good luck! – Djave Commented Jan 19, 2023 at 16:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 0

Take a look at Axious documentation. Looks like you are not even receiving a response, meaning error.response is left undefined. Maybe something wrong with the request options?