RIT Tech Blog

株式会社RITのエンジニアが知見を共有する技術ブログです。

getStaticPathsやgetStaticProps、getServerSidePropsなどが突然消える

こんにちは!エンジニアの川野です。

台風が過ぎ去って夏本番の暑さですね。怖い話でも聞いて涼みたいたいということで、 今回はVSCodeで表題の関数が突然消えるという恐怖体験について書きました。

心霊現象

Next.jsで開発をしているとき、下の画像のようなエラーに度々遭遇しました。

度々遭遇するエラー
度々遭遇するエラー

Server Error
Error: getStaticPaths was added without a getStaticProps in /posts/[id]. Without getStaticProps, getStaticPaths does nothing

This error happened while generating the page. Any console logs will be displayed in the terminal window.

直接の原因はエラーメッセージのとおり、getStaticPathsが書かれているのにgetStaticPropsが書かれていないというものでした。

ただ、実装し忘れてそうなったのではなく、実装してあったgetStaticPropsが突然、何者かによってファイルから消されてしまったのです。getServerSidePropsについても同様に消されてしまうことがありました。

消えたコードを履歴から戻せばエラー自体は解決するのですが、毎回30秒ほど時間を奪われるので原因をしっかり調査しました。

環境情報

  • VSCode: 1.58.2
  • TypeScript: 4.2.3
  • ESLint: 7.23.0

原因

その何者かは、VSCodeの到達できないコードの削除機能とsettings.jsonの設定値でした。

VSCodeにはreturnthrowの後方の、プログラム的に到達不可能なコードを削除する機能があります。

たとえば、以下のようにコードを書き、returnの後方のコードで cmd + .を押すと、Remove unreachable code とコマンドが出てきます。

到達不可能なコード
到達不可能なコード

実行すればもちろん消えてしまいます。

Remove unreachable code 実行後
Remove unreachable code 実行後

そしてこの機能はsettings.jsonで下記の設定をしていると、save時に発動するようになってしまいます。

settings.json

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    }
}

解決策

もちろんsource.fixAllfalseにすれば突然消えるということはなくなるのですが、それではESLintのフォーマットが動作しなくなってしまいます。

以下の設定にすればESLintのフォーマットだけ動作するようになりました。

settings.json

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

参考:Valid "unreachable" code is being aggressively removed as a result of syntax errors when allowUnreachableCode: false #109530

フォーマットされなくても、到達不可能コードはESLintが検知してくれます。
disallow unreachable code after return, throw, continue, and break statements (no-unreachable)

到達不可能コードはESLintが検知
到達不可能コードはESLintが検知

無事、解決できました!