I'm using Angular Material calendar component with date-fns and I try to use this on Storybook keep getting this error:
core.mjs:8400 ERROR RangeError: locale must contain localize property
at format (index.js:342:1)
at DateFnsAdapter.format (material-date-fns-adapter.mjs:145:1)
at get periodButtonText [as periodButtonText] (datepicker.mjs:1967:1)
at MatCalendarHeader_Template (datepicker.mjs:102:1)
at executeTemplate (core.mjs:10441:1)
at refreshView (core.mjs:10326:1)
at refreshComponent (core.mjs:11385:1)
at refreshChildComponents (core.mjs:10116:1)
at refreshView (core.mjs:10376:1)
at refreshEmbeddedViews (core.mjs:11339:1)
In the storybook already have set the localize as said in this other issue
decorators: [
moduleMetadata({
imports: [
HttpClientModule,
MatDatepickerModule,
MatMenuModule,
MatDateFnsModule,
MatFormFieldModule,
MatSelectModule,
MatInputModule,
BrowserAnimationsModule,
ButtonComponent,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient],
},
defaultLanguage: 'en',
}),
],
providers: [
{ provide: MAT_DATE_FNS_FORMATS, useValue: { useUtc: true } },
{
provide: MAT_DATE_LOCALE,
useValue: es,
},
],
}),
],
Versions:
"@storybook/angular": "^7.0.4"
"@angular/material": "^15.2.8"
"@angular/core": "^15.2.8"
Obs: The component works fine outside of storybook