TypeError: x is not a function

회사에서 server를 담당하게 되었고, server를 개발하다 삽질을 하게되어 기록을 남긴다.

이 error를 해결하기 위해 이틀동안 고생을 했고, 구글링 덕분에 문제를 해결 할 수 있었다.

 

기본적으로 함수의 정의가 잘못되었거나, 함수를 잘못 이용했을 때, 발생을 한다. 

object.map() 이라는 메소드는 없고, array.map() 메소드가 있다. 메소드를 잘못 활용했을 경우 나타나는 에러이다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function

TypeError: "x" is not a function - JavaScript | MDN

 

하지만, 회사에서 나타났던 error는 조금 달랐다. local 환경에서는 서비스에 아무 문제없이 작동이 잘 됐지만, build를 하고 서비스를 동작 시키면 TypeError: x is not a function 에러가 발생했다.

error stack을 보면 dist/~~.js 에 81234 줄에서 error라는데.... build를 하고 dist 파일을 살펴보면 난독된 코드라서 81234 번째 코드를 봐도 알 수 없다. 어떤 함수가 x로 바뀌어서 난독 코드가 된지 알수가 없기 때문에...

 

떄문에 TypeError: x is not a function을 구글링을 했고, TypeError: x is not a function webpack 또는 TypeError: x is not a function build와 같은 error를 찾다가... 이번 server에 node-fetch라는 모듈을 새로 도입 했기 때문에 TypeError: x is not a function node-fetch 검색을 하게 되었고, 해결할 수 있었다.

 

node-fetch는 2. version 이하에서는 호출 할 때, const fetch = require("node-fetch")로 호출이 가능하지만, 그 이상 버전에서는 import fetch from "node-fetch"를 활용해서 호출을 해야했다.

 

처음에 require를 이용해서 local에서는 문제 없었지만, build를 하고 나서는 에러가 발생했고, 모듈 호출 방식을 변경 했더니, 문제를 해결할 수 있었다.