Zenn
🙄

NuxtBridge導入してみた②　nuxtをnuxiに変えたら怒られたの巻【前編】

2022/08/10に公開
JavaScript
Nuxt
Vue.js
Nuxt Bridge
tech

こんにちは。この記事もNuxt使いです。
こちらのつづきでございます
https://zenn.dev/mihorin1729/articles/21f0b44f9cbfc4

前回は、yarn devしたときに
【WARN】[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.　
って15回も怒られたのを解消しました。

今回の問題：yarn devすると怒られる…ERROR Cannot start nuxt: Cannot read properties of undefined (reading 'callHook')

しかも、今回の記事では解決しきっていません、次回持越しになってますが操作は多分全部必要です！！

すみません。
とりあえず、15回怒られなくなった（エミュレータも通常通り起動！）ので次に進みます！

導入手順②　「Install Nuxt Bridge」

インストールします！
参考はあいかわらずこちらでございます。
https://v3.nuxtjs.org/bridge/overview/#install-nuxt-bridge
言うとおりにします。

% yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge

…しました。すると、

package.json
 "devDependencies": {
    "@nuxt/bridge": "npm:@nuxt/bridge-edge",
	…
  }

このような記述が、勝手に増えてました。よしよし。

怖いのでここで一旦エミュレータ起動

→これは成功。先へ進みます

導入手順③　「Update your scripts」

次は、package.jsonのスクリプトを変えろって書いてありました。はいはい変えます。

（余談：NuxiをGoogle翻訳で日本語訳すると、「女西」ってなるのじわる。中国語の読み方やんけ）

{
  "scripts": {
-   "dev": "nuxt",
+   "dev": "nuxi dev",
-   "build": "nuxt build",
+   "build": "nuxi build",
-   "start": "nuxt start",
+   "start": "nuxi preview"
  }
}

はいはい変えます……

"dev": "cross-env NUXT_ENV_DEPLOYMENT=test PORT=XXXX nuxt",

（一応ポート隠すｗ）

ああ、…うちのデータはエミュレータのポート変えてあるから、公式ガイドともともとの記述の様子が違う…心配だなあ

でもnuxtってついてるとこがあるから、そこだけnuxiに変えてやってみる。

package.json 
"scripts": {
    "dev": "cross-env NUXT_ENV_DEPLOYMENT=test PORT=XXXX nuxi dev",
    "build": "nuxi build",
    "start": "nuxi preview",
    "generate": "nuxi generate",
  },

ここまで書いて、起動！

% yarn dev

ERROR  Cannot start nuxt:  Cannot read properties of undefined (reading 'callHook')

エラー。

nuxiに変えたら、起動せず！！！

予想通り、起動してくれなくなりました。
はぁ。
まあ、なんでエラーが出るか、ぐーぐる検索の日々をはじめまする。

https://blog.epigno.jp/en/blog/updating-to-nuxt-bridge/

探していたら、現状全く同じ状況の方がいた！（ただし英語）

内容を要約すると、

「ポートを変えてるけどいいのかしらと思って、とりあえずnuxi dev とかにしたけど、エラーが出るわ。」

Nuxt CLI v3.0.0-rc.2-27530889.9e5a3cd                                                          09:39:39
                                                                                               09:39:39
  > Local:    http://localhost:3000/
  > Network:  http://##.##.###.###:3000/


 ERROR  Cannot start nuxt:  Cannot read properties of undefined (reading 'callHook')           09:39:41

  at load (node_modules/nuxi-edge/dist/chunks/dev.mjs:6735:33)
  ...

↑これ、上のサイトからそのまんま借りてきました。
わたしにも、同じエラー出る。まじで違うのポートの数字だけ…

で、その記事には、「しゃーなし先進め」って書いてあるので、ガイドに従って先に進めました。
きっと進めたら、できるようになるんだろう…！

本記事のまとめ

問題：yarn devすると見たことないエラーを吐かれる…ERROR Cannot start nuxt: Cannot read properties of undefined (reading 'callHook')

答え：まだ解決してないけど…手順は以下

% yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge

して

package.json 
"scripts": {
    "dev": "cross-env NUXT_ENV_DEPLOYMENT=test PORT=XXXX nuxi dev",
    "build": "nuxi build",
    "start": "nuxi preview",
    "generate": "nuxi generate",
  },

する。

次回持ち越し課題:エラーを吐くが先へ進めということで、公式ガイド導入手順④からお送りします

※なお、まだエラーは出るので、後編に続く…

Discussion