bug(material-date-fns-adapter): Cannot render datepicker, formatLong is undefined

[panikena]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

17.2.1, 18.2.14

Description

Mat-Datepicker with date-fns formatter fails to render properly.

The issue seems to be caused by the fact that new versions of date-fns no longer define formatLong function, while material-date-fns-adapter still tries to use it.
Compare 2.3.0 used by adapter v17.2.1 to 3.6.0 used by adapter v18.2.154 or to 4.1.0 used by v19.2.11
Surprisingly, 18.2.154 still works, while 19.2.11 fails in the same scenario

Reproduction

StackBlitz link: sample
Steps to reproduce:

1. Click on calendar icon to open the calendar view

Expected Behavior

mat-datepicker should be rendered and dates displayed in the correct locale

Actual Behavior

Calendar view is corrupted

Error from StackBlitz sample
[email protected]:26 ERROR TypeError: Cannot read properties of undefined (reading 'date') at dateLongFormatter (@angular_material-da…?v=5f828d1a:1008:25) at dateTimeLongFormatter (@angular_material-da…?v=5f828d1a:1052:12) at @angular_material-da…?v=5f828d1a:1124:14 at Array.map (<anonymous>) at format (@angular_material-da…?v=5f828d1a:1120:59) at _DateFnsAdapter.format (@angular_material-da…?v=5f828d1a:3145:12) at _MatDatepickerInput._formatValue (@angular_material_da…?v=5f828d1a:4438:78) at _MatDatepickerInput._assignValueProgrammatically (@angular_material_da…?v=5f828d1a:4466:10) at _MatDatepickerInput.writeValue (@angular_material_da…?v=5f828d1a:4383:10) at onChange (chunk-WQMPPPIF.js?v=5f828d1a:2803:23)

Error from my application with similar setup
ERROR TypeError: Cannot read properties of undefined (reading 'date') at dateLongFormatter (longFormatters.js:4:25) at dateTimeLongFormatter (longFormatters.js:48:12) at format.js:335:14 at Array.map (<anonymous>) at format (format.js:331:59) at _DateFnsAdapter.format (material-date-fns-adapter.mjs:139:12) at _MatDatepickerInput._formatValue (datepicker.mjs:4302:78) at _MatDatepickerInput._assignValueProgrammatically (datepicker.mjs:4332:10) at _MatDatepickerInput.writeValue (datepicker.mjs:4242:10) at onChange (forms.mjs:3476:23)

Environment

• Angular: 19.2.9
• CDK/Material: 19.2.11
• Browser(s): Firefox 137, Chrome 135
• Operating System (e.g. Windows, macOS, Ubuntu): WIndows 11

[crisbeto]

Hmm this is odd. We're testing against 4.1 in our own tests and it seems to work fine targeting the long format. I suspect this may be an issue with date-fns itself. I found a couple of issues that appear to be related:

date-fns/date-fns#3670
date-fns/date-fns#3843