0

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

0 Answers0