👩‍💻

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

2022/08/10に公開

こんにちは。この記事もNuxt使いです。
長編シリーズ化しそうな感じがいたします、NuxtBridgeさんです。
https://zenn.dev/mihorin1729/articles/21f0b44f9cbfc4
https://zenn.dev/mihorin1729/articles/9904057fc24fa4

このような流れで戦闘してきています。

今回の問題:yarn devすると見たことないエラーを吐かれる…ERROR Cannot start nuxt: Cannot read properties of undefined (reading 'callHook')→とりあえず先へ進む

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

こちらの記事とエラーが一緒で、記事さんが「先進め」って言っているので進むことといたしました。

導入手順④ Update nuxt.config

はい、これもガイドどおりにいたします。

nuxt.config.ts
import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  // Your existing configuration
})

ガイド通り、追記させて頂きました。

まあ、気にせず、

% yarn dev

Please remove @nuxt/typescript-build from buildModules or set bridge.typescript: false to avoid conflict with bridge.

おおーいエラー!(しかも新しい)

要約すると、

@nuxt/typescript-buildを消すか、bridge.typescript: falseを追加せよ、buildModulesに?

↑こやつは、TypeScript使えるようにするモジュールだと思う。
なんか、NuxtBridgeはもう、TypeScript標準装備してるから、このモジュールはもういらないんだって。

はい、消します。

package.json
-  "@nuxt/typescript-build": "^2.1.0"
nuxt.config.ts
 buildModules: [
 - '@nuxt/typescript-build',],

そして起動。

% yarn dev

起動、した!エミュレータ起動!きた!よっsy…

何も表示がない(なんならdefault.vueのレイアウトのみが鎮座)

コンポーネント一つも拾えていないということですね。
更に言うなら、Firestoreのデータもまったく拾えてない。=pluginsがなんも動いてない。

orz

はい、まあ、先進めたらよさそうかな。次行きますわ

導入手順⑤ Update tsconfig.json

(むしろこの追記まだなのによく起動したな?)
公式ガイドに言われるがままアプデ。

tsconfig.json
{
+ "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    ...
  }
}

追加致した。
でもまだ、エミュレータにはdefaultだけしかでてない…かなりシュールな感じである。

そうこうしてたら、起動しなくなった。
いやそうなのよ、何かに気づかれたのか起動もしなくなったのよ。別になんもしてない気がするけけどなぁ。
なに言ってるかって言うと、

Cannot find module 'XXX/node_modules/globby/ignore.js' imported from XXX/node_modules/globby/index.js

Did you mean to import ignore/index.js?

…ignoreかindex.jsインストールしようとしてる?

してないよ

むしろだれあんた。

今回は以上、次回持ち越し。

本記事のまとめ

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

答え:以下の操作をするとエラーが別のに変わる…Cannot find module 'XXX/node_modules/globby/ignore.js' imported from XXX/node_modules/globby/index.js

nuxt.config.ts
import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  // Your existing configuration
})

して

package.json
-  "@nuxt/typescript-build": "^2.1.0"
nuxt.config.ts
 buildModules: [
 - '@nuxt/typescript-build',],

して

tsconfig.json
{
+ "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    ...
  }
}

した。

いやー、次回へ続く…

次回持ち越し課題 新しいエラーを倒す!

Discussion