業務で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つの読書方法を紹介します。最後まで読めば効率よくインプットできるようになります。