TypeError: (0, _utils.default) is not a function

🔥 글의 목적: 이 에러를 다시 마주칠 나 자신을 위해 그리고 위의 에러로 인해 고생할 다른 개발자를 위해 에러 해결 방법을 공유하고자 글을 작성한다.

test code를 짜면서 위의 이미지와 같은 에러를 마주했다. 며칠이나 위의 버그의 원인을 찾기 위해 개인적으로 고생을 많이 했다. 처음에는 위의 에러 메시지 자체를 구글링할 생각을 하지 못했다…… 아니 왜 구글링부터 안 했을까라고 어이가 없을 수 있겠지만 개인적으로는 테스트 코드를 Redux 환경에서만 사용해 보다가 useState를 사용하기 위해 처음 테스트 코드를 작성했기 때문에 당연히 내가 테스트 코드를 잘못 짜서 생기는 에러라고 나도 모르게 확신했던 것이 문제였다. 그리고 내가 useState를 테스트하는 방법에도 실제로 문제가 있었다.

다시 에러의 해결로 돌아와서 이 에러는 결론적으로, 파일 어딘가에 있는 import 문을 잘못 사용한 것이 원인이었다. 아래의 코드를 살펴보자.

// utils.js
export function get({ page, key }) {
  return (obj) => obj[page][key];
}

export function updateSlide({ targetName, isMotion }) {
  if (targetName === 'previousArrow') {
    return ({ number }) => ({
      number: number - 1,
      isMotion,
    });
  }

  return ({ number }) => ({
    number: number + 1,
    isMotion,
  });
}

// ProductDetail/ProductWrapper.jsx

// ......

// 잘못된 import 문
import updateSlide from '../utils';

// 에러를 잡기 위해 올바르게 수정한 import 문
import { updateSlide } from '../utils';
// ......

ProductWrapper.jsx에서는 utils.js의 updateSlide 함수를 import 하여 사용하게 된다. 그런데 ‘잘못된 import 문’의 경우, 중괄호({})를 사용하지 않았다. 중괄호로 묶지 않는 경우는 export default 문을 사용한 함수를 import 할 때 유효한 문법이다. utils.js에는 다를 함수들도 export되어 있기 때문에 중괄호로 묶어서 updateSlide 함수를 import 해야 한다.

내가 모르고 있던 문법이었다면 속이 덜 상했을 텐데, 이미 잘 사용하고 있던 부분에서 에러가 발생했고 이를 빠르게 디버깅하지 못해 개인적으로 너무 아쉬웠다. 분명… 확인했던 부분 같은데, 이 당시 온 신경이 테스트 코드에 가있어서 애먼 코드를 계속 고쳤다. 이 한 줄로 인해 거의 3일이라는 시간 동안 useState와 관련된 테스트 코드를 수정하고 있었다. 이제 이 에러를 마주해도, 내가 작성한 이 글을 읽으며 10초 안에 에러를 해결할 테니 그만 속상해해야겠다.