[Vue] TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.effectScope) is not a function 에러 발생할 경우

뷰에서 코딩하다 보면 간혹 TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.effectScope) is not a function 에러를 맞딱뜨리는 경우가 있다.

System.err: An uncaught Exception occurred on "main" thread.
  System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function
  System.err: TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.effectScope) is not a function
  System.err: File: (file: app\webpack:\NativeScriptVueProject\webpack\bootstrap:27:0)
  System.err:
  System.err: StackTrace:
  System.err: resetStoreState(file: app\webpack:\NativeScriptVueProject\node_modules\vuex\dist\vuex.esm-bundler.js:132:25)
  System.err:   at Store(file: app\webpack:\NativeScriptVueProject\node_modules\vuex\dist\vuex.esm-bundler.js:955:0)
  System.err:   at ./app/shared/store.js(file: app\webpack:\NativeScriptVueProject\app\shared\store.js:7:15)
  System.err:   at __webpack_require__(file: app\webpack:\NativeScriptVueProject\webpack\bootstrap:24:0)
  System.err:   at fn(file: app\webpack:\NativeScriptVueProject\webpack\runtime\hot module replacement:62:0)
  System.err:   at ./app/app.js(file:///data/data/org.nativescript.NativeScriptVueProject/files/app/bundle.js:17:71)
  System.err:   at __webpack_require__(file: app\webpack:\NativeScriptVueProject\webpack\bootstrap:24:0)
  System.err:   at __webpack_exec__(file:///data/data/org.nativescript.NativeScriptVueProject/files/app/bundle.js:1593:39)
  System.err:   at (file:///data/data/org.nativescript.NativeScriptVueProject/files/app/bundle.js:1594:221)
  System.err:   at __webpack_require__.X(file: app\webpack:\NativeScriptVueProject\webpack\runtime\startup entrypoint:6:0)
  System.err:   at (file:///data/data/org.nativescript.NativeScriptVueProject/files/app/bundle.js:1594:47)
  System.err:   at (file:///data/data/org.nativescript.NativeScriptVueProject/files/app/bundle.js:1599:3)
  System.err:   at require(:1:266)
  System.err:
  System.err:
  System.err: TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.effectScope) is not a function
  System.err:
  System.err: StackTrace:
  System.err: resetStoreState(file: app\webpack:\NativeScriptVueProject\node_modules\vuex\dist\vuex.esm-bundler.js:132:25)
  System.err:   at Store(file: app\webpack:\NativeScriptVueProject\node_modules\vuex\dist\vuex.esm-bundler.js:955:0)
  System.err:   at ./app/shared/store.js(file: app\webpack:\NativeScriptVueProject\app\shared\store.js:7:15)
  System.err:   at __webpack_require__(file: app\webpack:\NativeScriptVueProject\webpack\bootstrap:24:0)
  System.err:   at fn(file: app\webpack:\NativeScriptVueProject\webpack\runtime\hot module replacement:62:0)
  System.err:   at ./app/app.js(file:///data/data/org.nativescript.NativeScriptVueProject/files/app/bundle.js:17:71)
  System.err:   at __webpack_require__(file: app\webpack:\NativeScriptVueProject\webpack\bootstrap:24:0)
  System.err:   at __webpack_exec__(file:///data/data/org.nativescript.NativeScriptVueProject/files/app/bundle.js:1593:39)
  System.err:   at (file:///data/data/org.nativescript.NativeScriptVueProject/files/app/bundle.js:1594:221)
  System.err:   at __webpack_require__.X(file: app\webpack:\NativeScriptVueProject\webpack\runtime\startup entrypoint:6:0)
  System.err:   at (file:///data/data/org.nativescript.NativeScriptVueProject/files/app/bundle.js:1594:47)
  System.err:   at (file:///data/data/org.nativescript.NativeScriptVueProject/files/app/bundle.js:1599:3)
  System.err:   at require(:1:266)
  System.err:   at Store(file: app\webpack:\NativeScriptVueProject\node_modules\vuex\dist\vuex.esm-bundler.js:955:0)
  System.err:   at ./app/shared/store.js(file: app\webpack:\NativeScriptVueProject\app\shared\store.js:7:15)
  System.err:   at __webpack_require__(file: app\webpack:\NativeScriptVueProject\webpack\bootstrap:24:0)
  System.err:   at fn(file: app\webpack:\NativeScriptVueProject\webpack\runtime\hot module replacement:62:0)
  System.err:   at ./app/app.js(file:///data/data/org.nativescript.NativeScriptVueProject/files/app/bundle.js:17:71)
  System.err:   at __webpack_require__(file: app\webpack:\NativeScriptVueProject\webpack\bootstrap:24:0)
  System.err:   at __webpack_exec__(file:///data/data/org.nativescript.NativeScriptVueProject/files/app/bundle.js:1593:39)
  System.err:   at (file:///data/data/org.nativescript.NativeScriptVueProject/files/app/bundle.js:1594:221)
  System.err:   at __webpack_require__.X(file: app\webpack:\NativeScriptVueProject\webpack\runtime\startup entrypoint:6:0)
  System.err:   at (file:///data/data/org.nativescript.NativeScriptVueProject/files/app/bundle.js:1594:47)
  System.err:   at (file:///data/data/org.nativescript.NativeScriptVueProject/files/app/bundle.js:1599:3)
  System.err:   at require(:1:266)

 

열심히 찾아보니, 뷰 버전과 라이브러리 버전이 맞지 않아서 발생하는 문제였다.

원은 대충 아래와 같았다.

• Vue.js의 오래된 버전 사용. effectScope 함수는 Vue 3.2.0에서 도입 됨.
• Vue.js 버전과 호환되지 않는 타사 라이브러리를 사용하고 있다거나..
• effectScope 함수 이름을 잘못 입력했다거나...

라는데, 이렇게 되면 가능성은 1번 밖에 없다.

 

그래서 나의 프로젝트 상태를 잘보니 세상에... 뷰3로 개발하는 중이 아니라.. 뷰2로 개발이 되고 있었던 것이다. 어쩐지.. 좀 계속 이상하다 싶었는데. 아뿔사였다.

다행히 프로젝트 진행된 것이 얼마되지 않아 걍 갈아엎고 새로 진행하고 있다.

 

부디 이런 실수는 하지 않도록 해야겠다.