【JavaScript】date-fnsのformat関数でUncaught (in promise) RangeError: Invalid time valueの対処法

業務でVue.jsのコードを書いている際に、Uncaught (in promise) RangeError: Invalid time valueというエラーに遭遇したので原因と対処法をまとめます。

問題

以下のコードを用いて日付をyyyy/MM/dd HH:mm形式に変換しようとしていました。

format関数はdate-fnsというライブラリが用意しているメソッドです。

const formatDateToMinutes = (date: string) => {
  return format(new Date(date), 'yyyy/MM/dd HH:mm');
};

しかし、このメソッドを使うとなぜか、Uncaught (in promise) RangeError: Invalid time valueというエラーが出てしまいました。

原因

単純ですが、仮引数のdateにundefinedを渡していたことが原因でした。

dateがundefinedだとnew Date(date)はInvalid Dateとなり、そのInvalid Dateをformat関数の第1引数として渡したために冒頭のエラーが発生していたようです。

解決方法

仮引数にきちんと値を渡すことで解決できました。

date-fnsのformat関数を使った際にUncaught (in promise) RangeError: Invalid time valueが発生したときは、仮引数に値が渡せているかを確認しましょう。

おわりに

てっきり仮引数のデータ型の問題だと思ってサーバー側のコードを見に行ったりしていましたが、完全に的外れなことをしていました、、。

参考文献

• https://date-fns.org/

技術書が好きなエンジニア向け

あわせて読みたい

【エンジニア向け】効率的な技術書の読み方5選【経験談】 スキルアップに直結させるための効率的な技術書の読み方を知りたくないですか？この記事ではエンジニア向けに効果的なインプットのための技術書の読み方を5つ紹介します。最後まで読めば自分に合う読み方が1つくらい見つかるはずです。ぜひご一読ください。