I am working on a NextJs project and I am very new to NextJs. I was facing a problem with Axios. I am using VS code and was trying to access (response.data.sliders) but my editor was showing an error. The error was "Property 'sliders' does not exist on type 'never'.ts(2339)". But after doing console.log(response.data), I can clearly see the 'sliders' there. I was getting sliders data but vs code was showing the error. I was quite frustrated about it but suddenly when I was thinking to ask a question here regarding my problem, I got the solution and it worked magically for me! So I thought why not write the solution with the problem so that other people like me can get help from it. I will attach a screenshot and a little code snippet of my project so that you can understand my problem clearly. This is the result of console.log(response.data)
And here is my code.
import axios from "axios";
const IndexPage = (props) => {
return (
<main>
<Section1 Section1Props={props.Section1Props} />
</main>
);
};
export async function getServerSideProps(context) {
try {
const response = await axios.get(urlGenerator("api/v1/frontend-configuration"));
const data = await response.data;
return {
props: {
Section1Props : data.sliders, // here I was getting the error for 'sliders'
},
}
} catch (error) {
console.log(error);
}
}
export default IndexPage;I solved my problem by declaring the response variable as follows
const responseTest: AxiosResponse<any> = await axios.get('https://api.github.com/users/maths032')
alert(responseTest.data.id)
and importing axios as follows
import axios, { AxiosResponse } from "axios";
I don't know if it's the best way, but it works for me.
Finally I found out that the problem is in my axios import statement. I need to import axios like this -
const { default: axios } = require('axios'); // or
const axios = require('axios').default;
Instead of this -
import axios from "axios";
I don't know why it worked though. Still I am feeling happy and hope it helped you too. If you know why it worked, please explain it here. It will be helpful for me to understand the whole thing.
In order to gain the TypeScript typings (for intellisense / autocomplete) while using CommonJS imports with require() use the following approach:
const axios = require('axios').default; // axios.<method> will now provide autocomplete and parameter typings
I needed an ESM import so below is how I did:
import axios, { AxiosResponse, AxiosError } from 'axios';
const Axios = axios.default;