apollo-client 投げれるようにするまで

[nyawach]

graphql-tag が ESM 対応してなさそう

DevTools がソースマップの読み込みに失敗しました（chrome-extension://cofdbpoegempjloogbagkncekinflcnj/build/content.js.map のコンテンツを読み込めませんでした（HTTP エラー: ステータス コード 404、net::ERR_UNKNOWN_URL_SCHEME））
index.js?8a15:3 Uncaught TypeError: Cannot destructure property '__extends' of '_tslib_js__WEBPACK_IMPORTED_MODULE_0___default.a' as it is undefined.
    at eval (index.js?8a15:3:1)
    at Module../node_modules/tslib/modules/index.js (app.js:2932:1)
    at __webpack_require__ (runtime.js:854:30)
    at fn (runtime.js:151:20)
    at eval (index.js?5184:1:1)
    at Module../node_modules/graphql-tag/lib/index.js (app.js:886:1)
    at __webpack_require__ (runtime.js:854:30)
    at fn (runtime.js:151:20)
    at Module.eval (vue-apollo.esm.js:66:70)
    at eval (vue-apollo.esm.js:2292:30)
eval @ index.js?8a15:3
./node_modules/tslib/modules/index.js @ app.js:2932
__webpack_require__ @ runtime.js:854
fn @ runtime.js:151
eval @ index.js?5184:1
./node_modules/graphql-tag/lib/index.js @ app.js:886
__webpack_require__ @ runtime.js:854
fn @ runtime.js:151
eval @ vue-apollo.esm.js:66
eval @ vue-apollo.esm.js:2292
./node_modules/vue-apollo/dist/vue-apollo.esm.js @ app.js:2991
__webpack_require__ @ runtime.js:854
fn @ runtime.js:151
eval @ apollo-module.js:21
./.nuxt/apollo-module.js @ app.js:23
__webpack_require__ @ runtime.js:854
fn @ runtime.js:151
eval @ index.js:46
./.nuxt/index.js @ app.js:203
__webpack_require__ @ runtime.js:854
fn @ runtime.js:151
eval @ client.js:49
./.nuxt/client.js @ app.js:47
__webpack_require__ @ runtime.js:854
fn @ runtime.js:151
0 @ app.js:573
__webpack_require__ @ runtime.js:854
checkDeferredModules @ runtime.js:46
webpackJsonpCallback @ runtime.js:33
（匿名） @ app.js:1
vue.runtime.esm.js?2b0e:8473 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.runtime.esm.js?2b0e:8484 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
client.js?1b93:95 [HMR] connected
DevTools がソースマップの読み込みに失敗しました（chrome-extension://cofdbpoegempjloogbagkncekinflcnj/build/content.js.map のコンテンツを読み込めませんでした（HTTP エラー: ステータス コード 404、net::ERR_UNKNOWN_URL_SCHEME））
localhost/:1 Unchecked runtime.lastError: The message port closed before a response was received.
localhost/:1 Unchecked runtime.lastError: The message port closed before a response was received.
localhost/:1 Unchecked runtime.lastError: The message port closed before a response was received.

という issue があった

エラー文で検索したら graphql-tag のエラーについて書いてる issue があったのでこれだな

Native ES Modules に要約しましたとのことでみてみる

So in Nuxt 2, the bundler (webpack) would simply pull in the CJS file ('main') for the server build, and use the ESM file ('module') for the client build.

However, in recent Node.js LTS releases, it is now possible to use native ESM module within Node.js. That means that Node.js itself can process JavaScript using ESM syntax, although it doesn't do it by default. The two most common ways to enable ESM syntax are:

3からはサーバーもクライアントもESM形式をつかってるので、変換してないCJSがこける様子

issueのコメントを追加した