[Vue.js] TypeError: handler.call is not a function 오류가 발생할 때 해결하는 방법

떠돌이개발자Nov 26, 2023

기존에 없던 오류가 발생하였다. 오류 내용은 다음과 같다.

TypeError: handler.call is not a function

TypeError: handler.call is not a function
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6565)
    at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3948)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
    at Watcher.get (vue.runtime.esm.js?2b0e:4479)
    at Watcher.run (vue.runtime.esm.js?2b0e:4554)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)
logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
callHook @ vue.runtime.esm.js?2b0e:4219
insert @ vue.runtime.esm.js?2b0e:3139
invokeInsertHook @ vue.runtime.esm.js?2b0e:6346
patch @ vue.runtime.esm.js?2b0e:6565
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then(비동기)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:3969
eval @ index.js?6435:244
eval @ index.js?6435:242
eval @ index.js?6435:119
eval @ Cont.vue?14dc:56
./src/views/test/Computer.vue @ 50.31dc47b0c0b600caa8b2.hot-update.js:35
__webpack_require__ @ app.js:791
hotApply @ app.js:710
(익명) @ app.js:364
Promise.then(비동기)
hotUpdateDownloaded @ app.js:363
hotAddUpdateChunk @ app.js:339
webpackHotUpdateCallback @ app.js:58
(익명) @ 50.31dc47b0c0b600caa8b2.hot-update.js:1

이런 오류는 어떻게 해결

[오류 발생한 뷰 코드]

  created() {
    this.$store
      .dispatch('getSample', 'A000636|A000704')
      .then(() => {
        this.option = this.$store.getters.getOption;
      });
  },
  mounted: {
  },

[해결방법]

코드를 원복 후 원래 코드로 돌려보면 정상이다. 그래서 원인을 찾기 위해 추가한 코드들을 살펴보았다.

뷰 생명주기 훅 중에 선언만하고 사용하고 있지 않다면 제거해야한다. 사용하지 않는 mounted 훅을 제거후 오류는 사라졌다.

  created() {
    this.$store
      .dispatch('getSample', 'A000636|A000704')
      .then(() => {
        this.option = this.$store.getters.getOption;
      });
  },
  
  // 제거
  //mounted: {
  //},

정확히 얘기하자면 나의 싫수이다. 생명주기 그 어떤 것을 선언해 두어도 사실 문제가 되지 않는다.

단지, 선언 방법이 틀렸을 뿐이다.

올바른 선언 방법은 다음과 같다.