Nuxt.js + @vue/apollo-composable에서 【ReferenceError: define is not defined】



Nuxt.js(composition-api)에 @vue/apollo-composable을 도입할 때 위의 오류가 발생했습니다.

~사용 모듈~
"dependencies": {
    "@nuxtjs/apollo": "^4.0.1-rc.5",
    "@nuxtjs/composition-api": "^0.22.0",
    "@vue/apollo-composable": "^4.0.0-alpha.12",
    "apollo-boost": "^0.4.9",
    "apollo-client": "^2.6.10",
    "core-js": "^3.6.5",
    "graphql-tag": "^2.11.0",
    "nuxt": "^2.14.6"
  },

해결책



issue 에 해결책이 작성되었습니다.

① nuxt.config.js의 build에 트랜스 파일을 추가한다.



nuxt.config.js
build: {
    transpile: ['@vue/apollo-composable'],
   }

② import를 @vue/apollo-composable/dist로 변경


- import { // } from '@vue/apollo-composable'
+ import { // } from '@vue/apollo-composable/dist'

이것으로 해결했습니다.

그건 그렇고, @vue/apollo-composable-v4.0.0-alpha.12를 사용하고 있습니다.
v4.0.0-alpha.10에 다운 그레이드로 피할 수 있다고 했지만, 자신의 경우는 여전히 쓸모가 없었습니다.

나중에 알게 된 것



SSR 모드가 아니고, SPA 모드라면 원래 에러가 나오지 않았습니다.
(왠지 잘 모르겠습니다・・・)

좋은 웹페이지 즐겨찾기