Open2
Vue3化のつらみ
よだかエラーの内容が不親切
Unhandled error during execution of render function
Property was accessed during render but is not defined on instance.
この辺のエラーが軒並み出てきた。
エラー文がとても大袈裟で、stack traceも本当に追いづらい…
追いづらいというのは、コンポーネントレベルでしか追えないので、たとえばページコンポーネント直下のめちゃくちゃネストした後のdivタグでエラーがあった場合、エラーが<Page />で起きてるよ。までしか教えてくれないのだ。
なので怪しいコンポーネントが含まれていそうなコンポーネント群をコメントアウトして動くかどうかを二分探索していくみたいなことをしていかないといけない。
Vueチームはissueに上がったコードを見ればどこが悪いかすぐわかるようですぐcloseして問題にしていないし、traceが追いづらいのをいいことに再現のためのplaygroundを作れない…
よだか大体のWarningがプロダクションビルドやCIでエラーとして出現しだす
普通逆だろうと思うが、例えばこれ
[Vue warn]: Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.
ローカルだとWarningで済むものが、なんとステージング環境ではそのまま実行されつづけてout of memoryになる。
しかもローカルではなぜか普通に表示されるのでプロダクションビルドしてみないと気づけない。
正直、Vue3にあげた時点でコンソールには大量のエラーとWarningが出るので、Warningの対応は後回しになりがちだが、全部解消しておいた方がいい。
このほかにもi18nのライブラリのWarningを放置していたらCI環境でだけテストが落ちるとかそういうことがあった。