Estoy trabajando en un proyecto de NextJs y soy muy nuevo en NextJs. Estaba enfrentando un problema con Axios. Estoy usando el código VS y estaba tratando de acceder (response.data.sliders) pero mi editor mostraba un error. El error fue "La propiedad 'deslizadores' no existe en el tipo 'nunca'.ts(2339)". Pero después de hacer console.log(response.data), puedo ver claramente los 'controles deslizantes' allí. Estaba obteniendo datos de los controles deslizantes, pero el código vs mostraba el error. Estaba bastante frustrado por eso, pero de repente, cuando estaba pensando en hacer una pregunta aquí sobre mi problema, ¡obtuve la solución y funcionó mágicamente para mí! Así que pensé por qué no escribir la solución con el problema para que otras personas como yo puedan obtener ayuda. Adjuntaré una captura de pantalla y un pequeño fragmento de código de mi proyecto para que pueda comprender claramente mi problema. Este es el resultado de console.log(response.data)
Y aquí está mi código.
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;Resolví mi problema declarando la variable de respuesta de la siguiente manera
const responseTest: AxiosResponse<any> = await axios.get('https://api.github.com/users/maths032') alert(responseTest.data.id)e importando axios de la siguiente manera
import axios, { AxiosResponse } from "axios";No sé si es la mejor manera, pero a mí me funciona.
Finalmente descubrí que el problema está en mi declaración de importación de axios. Necesito importar axios como este:
const { default: axios } = require('axios'); // or const axios = require('axios').default;En lugar de esto -
import axios from "axios";Aunque no sé por qué funcionó. Todavía me siento feliz y espero que te haya ayudado también. Si sabe por qué funcionó, explíquelo aquí. Será útil para mí entender todo el asunto.
Para obtener los tipos de escritura de TypeScript (para intellisense/autocompletar) al usar las importaciones de CommonJS con require(), use el siguiente enfoque:
const axios = require('axios').default; // axios.<method> will now provide autocomplete and parameter typings
Necesitaba una importación de ESM, así que a continuación se muestra cómo lo hice:
import axios, { AxiosResponse, AxiosError } from 'axios'; const Axios = axios.default;