👏

NuxtBridge導入してみた⑤ middlewareはお嫌い?の巻

2022/08/11に公開

おはようございます。NuxtBridgeソルジャーです。
昨日は導入で戦闘し、なんとかyarn devに成功したところで歓喜して寝たところでした。

https://zenn.dev/mihorin1729/articles/4474259eb07570

でも、今日は開かなくなってました。あれれ?
再起動したことで、またなにか欠陥に気づかれたのか…

今回の問題:エラー…Module build failed (from ./node_modules/babel-loader/lib/index.js)

ないモジュールはインストール?

でも、やたらインストールしすぎじゃないか?他の問題をなにか叩いてみて、まだ言ってくるようであれば戦闘しようかなぁ。

で、記事を読み返して残してきた問題を洗い出す。すると…

middlewareに波線ついてたな…

こいつ放置してた。直感で、こいつを叩いてみようと思い立つ。

超ggr 「middleware NuxtBridge 動かない」

https://github.com/nuxt-community/auth-module/issues/1519

検索すると、こんなんとか出てきました。
書いてあることとしては

  • NuxtBridgeでは middlewareは機能しないよん(→知ってた)
  • 開発buildで動いても、実機では稼働しないよん(→うそだ 同じ挙動してくれ頼むから)
  • ページのScriptに認証middlewareを設定したら機能するよん(→いやだ)

なんかとりあえず、ちょっとだけ変更して先へ進むことに。

nuxt.config.ts
export default defineNuxtConfig({
	 …
router: {
- middleware: "auth"
+ middleware: ['auth']
  }
})

あきらめてinstallすることに

大丈夫。ブランチ分けてあるから、最悪消せば良し。

% yarn add @babel/plugin-syntax-nullish-coalescing-operator --dev

そして

% yarn dev

起動。内部も無事、動作。

本記事のまとめ

問題:Module build failed (from ./node_modules/babel-loader/lib/index.js) をなんとかする

答え:yarn add @babel/plugin-syntax-nullish-coalescing-operator --dev …ないモジュールはインストールする(再掲)

番外編 nuxt.config.tsのmiddlewareの波線は、[]でくくると一旦消える

Discussion