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モードならそもそもエラーが出ませんでした。
（なぜかはよくわかりません・・・）