業務でVue.jsのコードを書いている際に、Uncaught (in promise) RangeError: Invalid time value
というエラーに遭遇したので原因と対処法をまとめます。
記事の信頼性
- 独学で未経験から従業員300名以上の自社開発企業へ転職しました。
- 実務ではVue.jsとRailsを毎日書いています。
- 初心者や駆け出しエンジニアがつまづくポイントも身をもってよく理解しています。
目次
問題
以下のコードを用いて日付を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
おわりに
てっきり仮引数のデータ型の問題だと思ってサーバー側のコードを見に行ったりしていましたが、完全に的外れなことをしていました、、。
参考文献
技術書が好きなエンジニア向け
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://kazuya-engineer.com/wp-content/uploads/2024/05/技術書を読む.001-300x169.jpeg)
【エンジニア向け】効率的な技術書の読み方5選【経験談】
スキルアップに直結させるための効率的な技術書の読み方を知りたくないですか?この記事ではエンジニア向けに効果的なインプットのための技術書の読み方を5つ紹介します。最後まで読めば自分に合う読み方が1つくらい見つかるはずです。ぜひご一読ください。
コメント