TypeScriptでdate-fnsのlocaleを使っても曜日を日本語化できない

問題

date-fnsで日本語の曜日を取得したいと思い下記のようなコードを書きました。

date.ts

import { format } from 'date-fns'
import ja from 'date-fns/locale/ja'

const date = format(new Date(), 'yyyy年MM月dd日(E)', {locale: ja})
console.log(date)

しかしこの書き方だと何故か曜日が日本語に変換されず、英語のまま出力されてしまいました。

output

期待する結果: 2021年11月14日(日)
実際の結果: 2021年11月14日(Sun)

原因

JavaScriptにトランスパイルされたdate.jsを確認したところ以下のようなコードになっていました。

date.js

"use strict";
exports.__esModule = true;
var date_fns_1 = require("date-fns");
var ja_1 = require("date-fns/locale/ja");
var date = (0, date_fns_1.format)(new Date(), 'yyyy年MM月dd日(E)', { locale: ja_1["default"] }); // ポイント
console.log(date);

ポイントは{ locale: ja_1["default"] }の部分でlocale/jaがdefault exportされてしまっているのが原因のようです。

解決策

ライブラリのimportの仕方を変えることで解決できました。

date.ts

import { format } from 'date-fns'
- import ja from 'date-fns/locale/ja'
+ import { ja } from 'date-fns/locale' // 変更

const date = format(new Date(), 'yyyy年MM月dd日(E)', {locale: ja})
console.log(date)

output

2021年11月14日(日)

トランスパイルされたコードは下記のようになります。

date.js

"use strict";
exports.__esModule = true;
var date_fns_1 = require("date-fns");
var locale_1 = require("date-fns/locale");
var date = (0, date_fns_1.format)(new Date(), 'yyyy年MM月dd日(E)', { locale: locale_1.ja });
console.log(date);