こんにちは。この記事もNuxt使いです。 
こちらのつづきでございます 
<iframe id="zenn-embedded__76be56d2ead5b" src="https://embed.zenn.studio/card#zenn-embedded__76be56d2ead5b" data-content="https%3A%2F%2Fzenn.dev%2Fmihorin1729%2Farticles%2F21f0b44f9cbfc4" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://zenn.dev/mihorin1729/articles/21f0b44f9cbfc4" style="display:none" target="_blank">https://zenn.dev/mihorin1729/articles/21f0b44f9cbfc4</a>
前回は、<code>yarn dev</code>したときに 
【WARN】[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(&lt;inner-selector&gt;) instead.　 
って15回も怒られたのを解消しました。
<h1 id="%E4%BB%8A%E5%9B%9E%E3%81%AE%E5%95%8F%E9%A1%8C%EF%BC%9Ayarn-dev%E3%81%99%E3%82%8B%E3%81%A8%E6%80%92%E3%82%89%E3%82%8C%E3%82%8B%E2%80%A6error-cannot-start-nuxt%3A-cannot-read-properties-of-undefined-(reading-'callhook')">
<a class="header-anchor-link" href="#%E4%BB%8A%E5%9B%9E%E3%81%AE%E5%95%8F%E9%A1%8C%EF%BC%9Ayarn-dev%E3%81%99%E3%82%8B%E3%81%A8%E6%80%92%E3%82%89%E3%82%8C%E3%82%8B%E2%80%A6error-cannot-start-nuxt%3A-cannot-read-properties-of-undefined-(reading-'callhook')" aria-hidden="true"></a> 今回の問題：yarn devすると怒られる…ERROR Cannot start nuxt: Cannot read properties of undefined (reading 'callHook')</h1>
<h2 id="%E3%81%97%E3%81%8B%E3%82%82%E3%80%81%E4%BB%8A%E5%9B%9E%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%A7%E3%81%AF%E8%A7%A3%E6%B1%BA%E3%81%97%E3%81%8D%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%9B%E3%82%93%E3%80%81%E6%AC%A1%E5%9B%9E%E6%8C%81%E8%B6%8A%E3%81%97%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%E3%81%8C%E6%93%8D%E4%BD%9C%E3%81%AF%E5%A4%9A%E5%88%86%E5%85%A8%E9%83%A8%E5%BF%85%E8%A6%81%E3%81%A7%E3%81%99%EF%BC%81%EF%BC%81">
<a class="header-anchor-link" href="#%E3%81%97%E3%81%8B%E3%82%82%E3%80%81%E4%BB%8A%E5%9B%9E%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%A7%E3%81%AF%E8%A7%A3%E6%B1%BA%E3%81%97%E3%81%8D%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%9B%E3%82%93%E3%80%81%E6%AC%A1%E5%9B%9E%E6%8C%81%E8%B6%8A%E3%81%97%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%E3%81%8C%E6%93%8D%E4%BD%9C%E3%81%AF%E5%A4%9A%E5%88%86%E5%85%A8%E9%83%A8%E5%BF%85%E8%A6%81%E3%81%A7%E3%81%99%EF%BC%81%EF%BC%81" aria-hidden="true"></a> しかも、今回の記事では解決しきっていません、次回持越しになってますが操作は多分全部必要です！！</h2>
すみません。 
とりあえず、15回怒られなくなった（エミュレータも通常通り起動！）ので次に進みます！
<h1 id="%E5%B0%8E%E5%85%A5%E6%89%8B%E9%A0%86%E2%91%A1-%E3%80%8Cinstall-nuxt-bridge%E3%80%8D">
<a class="header-anchor-link" href="#%E5%B0%8E%E5%85%A5%E6%89%8B%E9%A0%86%E2%91%A1-%E3%80%8Cinstall-nuxt-bridge%E3%80%8D" aria-hidden="true"></a> 導入手順②　「Install Nuxt Bridge」</h1>
インストールします！ 
参考はあいかわらずこちらでございます。 
<iframe id="zenn-embedded__201dd80ca4d7f" src="https://embed.zenn.studio/card#zenn-embedded__201dd80ca4d7f" data-content="https%3A%2F%2Fv3.nuxtjs.org%2Fbridge%2Foverview%2F%23install-nuxt-bridge" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://v3.nuxtjs.org/bridge/overview/#install-nuxt-bridge" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://v3.nuxtjs.org/bridge/overview/#install-nuxt-bridge</a> 
言うとおりにします。
<pre><code>% yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge
</code></pre>
…しました。すると、
<div class="code-block-container">
<div class="code-block-filename-container">package.json</div>
<pre class="language-js"><code class="language-js"> "devDependencies": {
 "@nuxt/bridge": "npm:@nuxt/bridge-edge",
	…
 }
</code></pre>
</div>このような記述が、勝手に増えてました。よしよし。
<h4 id="%E6%80%96%E3%81%84%E3%81%AE%E3%81%A7%E3%81%93%E3%81%93%E3%81%A7%E4%B8%80%E6%97%A6%E3%82%A8%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF%E8%B5%B7%E5%8B%95">
<a class="header-anchor-link" href="#%E6%80%96%E3%81%84%E3%81%AE%E3%81%A7%E3%81%93%E3%81%93%E3%81%A7%E4%B8%80%E6%97%A6%E3%82%A8%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF%E8%B5%B7%E5%8B%95" aria-hidden="true"></a> 怖いのでここで一旦エミュレータ起動</h4>
<h4 id="%E2%86%92%E3%81%93%E3%82%8C%E3%81%AF%E6%88%90%E5%8A%9F%E3%80%82%E5%85%88%E3%81%B8%E9%80%B2%E3%81%BF%E3%81%BE%E3%81%99">
<a class="header-anchor-link" href="#%E2%86%92%E3%81%93%E3%82%8C%E3%81%AF%E6%88%90%E5%8A%9F%E3%80%82%E5%85%88%E3%81%B8%E9%80%B2%E3%81%BF%E3%81%BE%E3%81%99" aria-hidden="true"></a> →これは成功。先へ進みます</h4>
<h1 id="%E5%B0%8E%E5%85%A5%E6%89%8B%E9%A0%86%E2%91%A2-%E3%80%8Cupdate-your-scripts%E3%80%8D">
<a class="header-anchor-link" href="#%E5%B0%8E%E5%85%A5%E6%89%8B%E9%A0%86%E2%91%A2-%E3%80%8Cupdate-your-scripts%E3%80%8D" aria-hidden="true"></a> 導入手順③　「Update your scripts」</h1>
次は、<code>package.json</code>のスクリプトを変えろって書いてありました。はいはい変えます。
（余談：NuxiをGoogle翻訳で日本語訳すると、「女西」ってなるのじわる。中国語の読み方やんけ）
<div class="code-block-container"><pre class="diff-highlight language-diff-js"><code class="diff-highlight language-diff-js">{
 "scripts": {
- "dev": "nuxt",
+ "dev": "nuxi dev",
- "build": "nuxt build",
+ "build": "nuxi build",
- "start": "nuxt start",
+ "start": "nuxi preview"
 }
}
</code></pre></div>はいはい変えます……
<h2 id="%22dev%22%3A-%22cross-env-nuxt_env_deployment%3Dtest-port%3Dxxxx-nuxt%22%2C">
<a class="header-anchor-link" href="#%22dev%22%3A-%22cross-env-nuxt_env_deployment%3Dtest-port%3Dxxxx-nuxt%22%2C" aria-hidden="true"></a> "dev": "cross-env NUXT_ENV_DEPLOYMENT=test PORT=XXXX nuxt",</h2>
（一応ポート隠すｗ）
ああ、…うちのデータはエミュレータのポート変えてあるから、公式ガイドともともとの記述の様子が違う…心配だなあ
でも<code>nuxt</code>ってついてるとこがあるから、そこだけ<code>nuxi</code>に変えてやってみる。
<div class="code-block-container">
<div class="code-block-filename-container">package.json </div>
<pre class="diff-highlight language-diff-js"><code class="diff-highlight language-diff-js">"scripts": {
 "dev": "cross-env NUXT_ENV_DEPLOYMENT=test PORT=XXXX nuxi dev",
 "build": "nuxi build",
 "start": "nuxi preview",
 "generate": "nuxi generate",
 },
</code></pre>
</div>ここまで書いて、起動！
<pre><code>% yarn dev
</code></pre>
<div class="code-block-container"><pre><code>ERROR Cannot start nuxt: Cannot read properties of undefined (reading 'callHook')
</code></pre></div>エラー。
<h2 id="nuxi%E3%81%AB%E5%A4%89%E3%81%88%E3%81%9F%E3%82%89%E3%80%81%E8%B5%B7%E5%8B%95%E3%81%9B%E3%81%9A%EF%BC%81%EF%BC%81%EF%BC%81">
<a class="header-anchor-link" href="#nuxi%E3%81%AB%E5%A4%89%E3%81%88%E3%81%9F%E3%82%89%E3%80%81%E8%B5%B7%E5%8B%95%E3%81%9B%E3%81%9A%EF%BC%81%EF%BC%81%EF%BC%81" aria-hidden="true"></a> <code>nuxi</code>に変えたら、起動せず！！！</h2>
予想通り、起動してくれなくなりました。 
はぁ。 
まあ、なんでエラーが出るか、ぐーぐる検索の日々をはじめまする。
<iframe id="zenn-embedded__84ce7c6ff0602" src="https://embed.zenn.studio/card#zenn-embedded__84ce7c6ff0602" data-content="https%3A%2F%2Fblog.epigno.jp%2Fen%2Fblog%2Fupdating-to-nuxt-bridge%2F" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://blog.epigno.jp/en/blog/updating-to-nuxt-bridge/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://blog.epigno.jp/en/blog/updating-to-nuxt-bridge/</a>
探していたら、現状全く同じ状況の方がいた！（ただし英語）
内容を要約すると、
<h2 id="%E3%80%8C%E3%83%9D%E3%83%BC%E3%83%88%E3%82%92%E5%A4%89%E3%81%88%E3%81%A6%E3%82%8B%E3%81%91%E3%81%A9%E3%81%84%E3%81%84%E3%81%AE%E3%81%8B%E3%81%97%E3%82%89%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%A6%E3%80%81%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9Anuxi-dev-%E3%81%A8%E3%81%8B%E3%81%AB%E3%81%97%E3%81%9F%E3%81%91%E3%81%A9%E3%80%81%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E5%87%BA%E3%82%8B%E3%82%8F%E3%80%82%E3%80%8D">
<a class="header-anchor-link" href="#%E3%80%8C%E3%83%9D%E3%83%BC%E3%83%88%E3%82%92%E5%A4%89%E3%81%88%E3%81%A6%E3%82%8B%E3%81%91%E3%81%A9%E3%81%84%E3%81%84%E3%81%AE%E3%81%8B%E3%81%97%E3%82%89%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%A6%E3%80%81%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9Anuxi-dev-%E3%81%A8%E3%81%8B%E3%81%AB%E3%81%97%E3%81%9F%E3%81%91%E3%81%A9%E3%80%81%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E5%87%BA%E3%82%8B%E3%82%8F%E3%80%82%E3%80%8D" aria-hidden="true"></a> 「ポートを変えてるけどいいのかしらと思って、とりあえずnuxi dev とかにしたけど、エラーが出るわ。」</h2>
<div class="code-block-container"><pre><code>Nuxt CLI v3.0.0-rc.2-27530889.9e5a3cd 09:39:39
 09:39:39
 &gt; Local: http://localhost:3000/
 &gt; 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)
 ...
</code></pre></div>↑これ、上のサイトからそのまんま借りてきました。 
わたしにも、同じエラー出る。まじで違うのポートの数字だけ…
で、その記事には、「しゃーなし先進め」って書いてあるので、ガイドに従って先に進めました。 
きっと進めたら、できるようになるんだろう…！
<h1 id="%E6%9C%AC%E8%A8%98%E4%BA%8B%E3%81%AE%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E6%9C%AC%E8%A8%98%E4%BA%8B%E3%81%AE%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> 本記事のまとめ</h1>
<h2 id="%E5%95%8F%E9%A1%8C%EF%BC%9Ayarn-dev%E3%81%99%E3%82%8B%E3%81%A8%E8%A6%8B%E3%81%9F%E3%81%93%E3%81%A8%E3%81%AA%E3%81%84%E3%82%A8%E3%83%A9%E3%83%BC%E3%82%92%E5%90%90%E3%81%8B%E3%82%8C%E3%82%8B%E2%80%A6error-cannot-start-nuxt%3A-cannot-read-properties-of-undefined-(reading-'callhook')">
<a class="header-anchor-link" href="#%E5%95%8F%E9%A1%8C%EF%BC%9Ayarn-dev%E3%81%99%E3%82%8B%E3%81%A8%E8%A6%8B%E3%81%9F%E3%81%93%E3%81%A8%E3%81%AA%E3%81%84%E3%82%A8%E3%83%A9%E3%83%BC%E3%82%92%E5%90%90%E3%81%8B%E3%82%8C%E3%82%8B%E2%80%A6error-cannot-start-nuxt%3A-cannot-read-properties-of-undefined-(reading-'callhook')" aria-hidden="true"></a> 問題：yarn devすると見たことないエラーを吐かれる…ERROR Cannot start nuxt: Cannot read properties of undefined (reading 'callHook')</h2>
<h2 id="%E7%AD%94%E3%81%88%EF%BC%9A%E3%81%BE%E3%81%A0%E8%A7%A3%E6%B1%BA%E3%81%97%E3%81%A6%E3%81%AA%E3%81%84%E3%81%91%E3%81%A9%E2%80%A6%E6%89%8B%E9%A0%86%E3%81%AF%E4%BB%A5%E4%B8%8B">
<a class="header-anchor-link" href="#%E7%AD%94%E3%81%88%EF%BC%9A%E3%81%BE%E3%81%A0%E8%A7%A3%E6%B1%BA%E3%81%97%E3%81%A6%E3%81%AA%E3%81%84%E3%81%91%E3%81%A9%E2%80%A6%E6%89%8B%E9%A0%86%E3%81%AF%E4%BB%A5%E4%B8%8B" aria-hidden="true"></a> 答え：まだ解決してないけど…手順は以下</h2>
<pre><code>% yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge
</code></pre>
して
<div class="code-block-container">
<div class="code-block-filename-container">package.json </div>
<pre class="diff-highlight language-diff-js"><code class="diff-highlight language-diff-js">"scripts": {
 "dev": "cross-env NUXT_ENV_DEPLOYMENT=test PORT=XXXX nuxi dev",
 "build": "nuxi build",
 "start": "nuxi preview",
 "generate": "nuxi generate",
 },
</code></pre>
</div>する。
<h2 id="%E6%AC%A1%E5%9B%9E%E6%8C%81%E3%81%A1%E8%B6%8A%E3%81%97%E8%AA%B2%E9%A1%8C%3A%E3%82%A8%E3%83%A9%E3%83%BC%E3%82%92%E5%90%90%E3%81%8F%E3%81%8C%E5%85%88%E3%81%B8%E9%80%B2%E3%82%81%E3%81%A8%E3%81%84%E3%81%86%E3%81%93%E3%81%A8%E3%81%A7%E3%80%81%E5%85%AC%E5%BC%8F%E3%82%AC%E3%82%A4%E3%83%89%E5%B0%8E%E5%85%A5%E6%89%8B%E9%A0%86%E2%91%A3%E3%81%8B%E3%82%89%E3%81%8A%E9%80%81%E3%82%8A%E3%81%97%E3%81%BE%E3%81%99">
<a class="header-anchor-link" href="#%E6%AC%A1%E5%9B%9E%E6%8C%81%E3%81%A1%E8%B6%8A%E3%81%97%E8%AA%B2%E9%A1%8C%3A%E3%82%A8%E3%83%A9%E3%83%BC%E3%82%92%E5%90%90%E3%81%8F%E3%81%8C%E5%85%88%E3%81%B8%E9%80%B2%E3%82%81%E3%81%A8%E3%81%84%E3%81%86%E3%81%93%E3%81%A8%E3%81%A7%E3%80%81%E5%85%AC%E5%BC%8F%E3%82%AC%E3%82%A4%E3%83%89%E5%B0%8E%E5%85%A5%E6%89%8B%E9%A0%86%E2%91%A3%E3%81%8B%E3%82%89%E3%81%8A%E9%80%81%E3%82%8A%E3%81%97%E3%81%BE%E3%81%99" aria-hidden="true"></a> 次回持ち越し課題:エラーを吐くが先へ進めということで、公式ガイド導入手順④からお送りします</h2>
※なお、まだエラーは出るので、後編に続く…

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

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

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

導入手順②　「Install Nuxt Bridge」

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

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

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

導入手順③　「Update your scripts」

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

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

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

Discussion