CHAPTER4はじめでのこと。
事象
projectを作成して、appフォルダに関連ディレクトリを移した。その後少し進めると、さっきまでできていたyarn devが通らなくなった。
yarn installを叩いて依存関係を修正するも、今度はelement-uiがうまく動かない。
SSRでレンダリングされたと思われる最初のうちはelement-uiが当たっているけど、読み込みが終わるとスタイルが崩れて、プレーンなテキストに戻ってしまう。
element-uiのel-menu-itemあたりでエラーが起きている。
よく見ると、SSRとクライアントで描画したDOMが不一致になっているとのエラーも混ざっている。
単純なタイポでもなさそうで、よくわからずにyarn create nuxt-appを数回試した。
解決策と原因
よく考えずに.nuxtフォルダまでappディレクトリに移していたことが原因っぽい。
依存関係が崩れて、yarn installで修正したと思っても、よく見るとelement-uiのバージョンがどうのでwarning吐いてた。
.nuxtフォルダに触らない手順だと、特にエラー発生せず。
P１０６ページ周辺でのこと。
事象：
・ユーザー登録を実行すると、失敗のnotificationがでる。
・しかし、firebaseのDBを見てみると、ユーザ情報は登録されている。
・devtoolsでhttpのpatchに対して200[OK]のレスポンスが返ってきていることも見える
・登録したユーザー名でログインに成功する。
・ユーザ登録は実際にできているのに、失敗のnotificationしかでない。
考察：
ユーザー登録まではできているのだから、patchを投げたところまでは良いはずと判断。
じゃあその次らへんか・・・？
そうしたらstoreに書いたregisterのロジックでtypo発見。$axios.$patchの結果を変数userに格納し忘れる痛恨のミスを発見。
これだと思って修正するも事象はなおらず。
あとは何があるんだろ。
この手のデバッグを効率よくやる方法を知りたい。。。
原因
後日、改めて最初から写経しなおしたらすぐわかったのだけど、単純にthisを忘れたり、1行飛ばしたりしてただけだった。
深夜にやると、単純なこともわからなくなりがち。