TypeError: _api_axiosInstance_WEBPACK_IMPORTED_MODULE_11__

 

에러가 없는 데이터 가져오기 실패와 더불어 해당 에러까지 포함해 2시간을 잡아먹은...!!

 

물론 환경변수를 불러오는 부분에서도 문제가 있었다. 

하지만 그때는 에러없이 axios에서 값 자체를 받아오지 못했다.

 

원인을 찾다가 환경변수를 사용할 때에 큰따옴표를 사용하지 않아야 한다는 것을 알았다.

 

그리고 해당 에러는 이후에 발생된 에러이다.

 

 

코드공유

import axios from "axios";
import requests from "./request";

const axiosInstance = axios.create({
  baseURL: process.env.REACT_APP_SERVER_URL,
  headers: {
    "Content-Type": "application/json",
  },
  params: {
    id: "",
    nickname: "",
  },
  responseType: "json",
});

async function fetchPostInstance() {
  try {
    const responseLetters = await axiosInstance.get(requests.fetchLetters);
    console.log(responseLetters.status);
  } catch (error) {
    console.error(error);
    if (error.response) {
      console.error(error.response.status);
    }
  }

  try {
    const responseUserInfo = await axiosInstance.get(requests.fetchUserInfo);
    console.log(responseUserInfo.status);
  } catch (error) {
    console.error(error);
    if (error.response) {
      console.error(error.response.status);
    }
  }
}

export default { axiosInstance, fetchPostInstance };

 

 

우선 baseURL 부분도 초반에는 아래와 같이 작성해서 아예 값을 받아오지 못하는 이슈가 있었다🥲

사실 여기서 시간 다잡아먹은...

axios 사용되는 코드 전부 디버깅하느라.....ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

  baseURL: "process.env.REACT_APP_SERVER_URL",

 

 

그리고 해당 에러를 보면 Import 부분이 잘못되었다고 나왔기 때문에

바로 알아냈다!!!!!!

 

값을 2개 이상 내보내고 있기 때문에 아래와 같이 수정해주고

export { axiosInstance, fetchPostInstance };

 

 

사용하는 곳에서도 변경!!

import { axiosInstance } from "../api/axiosInstance";

import { fetchPostInstance } from "./api/axiosInstance";