[버그 이슈] Build Erorr, The "data" argument must be...

코감기 약 먹고 비몽사몽하는 와중에 데이터 타입 강의를 듣는 중 혼자 북치고 장구치다 스스로 버그 만듦. 평소에 일을 만드는 편

 

 

👩‍💻 Current Behavior

Build Error!

특정 기능을 가진 함수를 만들고, 어디서든 import할 수 있도록 그 함수의 이름으로 js파일을 만들었다. 갑자기 브라우저 빌드에 오류가 떴음을 발견

-> 데이터의 타입을 문자열로 불러오는 getType 함수를 만들고, 함수의 이름과 동일한 getType.js파일을 만들어 다른 파일에서 불러오는 코드를 작성하는 도중에 빌드 오류

function getType(data) {
  return Object.prototype.toString.call(data).slice(8, -1)
}

이제 겨우 코드 두 줄 짰을 뿐인데..

 

 

👩‍💻 fails with the following error :

VS CODE 터미널

웹페이지

 

 

👩‍💻 Error message

The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received null

 

 

🤦‍♀️ Expected Behavior (혼자만의 상상임 거의 망상 수준의 흉측 망측한 추측)

직역을 통한 추측 -> 데이터 타입을 잘못 기재했을 가능성

 

 

🤷‍♀️ Possible solution

1. 오타 확인 : 지금까지 발생한 버그는 혼자 손가락 삐긋해서 오타난 바람에 발생한 경우가 99%

2. 도와주세요 구글신

3. ???

 

 

😎 발견된 버그

역시나 오타였다. 코드를 작성했던 행위를 되감기하여 하나하나 되짚어보니 index.html에서 script주소의 test.js를 text.js로 작성한 탓이었다. 여기서 에러가 발생했을 경우에는 바로 아래와 같은 경고문구가 나온다. 

Enoent: no such file or directory

📍 Enoent라는 단어 자체가 파일이나 경로를 찾을 수 없다를 의미한다.

 

 

👀그런데 말입니다.

경로를 잘못 기재한지 모르고 신나게 코드를 짜다 보니 ENOENT라는 경고문구는 어느새 사라져있다. 마치 Bundle.js에 문제가 있는 듯 보이는데(이건 순전히 일차원적 추측) 마지막 문장에는 이렇게 적혀 있다.

at async Timeout._onTimeout

비동기(async)도 모르겠고 시한폭탄 같은 타임아웃도 모르겠으니 링크랑 북마크 걸어놓고 버그 보고서는 여기까지!

타임아웃 (컴퓨팅) - 위키백과, 우리 모두의 백과사전

 

 

👩‍💻 오늘의 교훈

html과 css, 그리고 간단한 javascript를 이용해 웹사이트를 만들 때는 오탈자가 들어가면 그 부분에 해당하는 코드만 제대로 출력되지 않거나 시각적으로 모양이 달라지는 등 수정해야 할 부분을 비교적 쉽게 찾을 수 있다. 그런데 npm 에서 parcel-bundler를 5분 전에 설치하고 이제 막 응용을 해보려고 하는 참이었는데 터미널에 error!가 뜨면서 브라우저 환경에서도 Build Error가 발생하였다.

이제는 뭐랄까 버그가 나면 무조건 오타겠거니 할 정도로 당황하지 않고 오탈자부터 찾기에 이 정도는 금방 해결이 가능하다. 해서 절대 내 손과 내 눈을 믿지 말자. 정신 똑바로 차리고 키보드 두드리자 정도로 마무리하고 자야겠다.