I18n: Using cldr data with nextjs

[Steffen Harbich]

Hello,

can you please provide a working example of DateRangePicker that uses German culture and is based on nextjs?

In my nextjs app I have the following error when I try to do so:

TypeError: can't convert undefined to object

Callstack: ./node_modules/@syncfusion/ej2-react-calendars/node_modules/@syncfusion/ej2-calendars/src/calendar/calendar.js/CalendarBase.prototype.getCultureValues

When I was debugging the code, the object "cldrData" was updated by my call to "loadCldr" but later when the DateRangePicker popup is opened, then "cldrData" is undefined in "getCultureValues". I am using nextjs with getServerSideProps.

Please help me, we really need to localize the date components.

Best regards,

Steffen

[Ponmani Murugaiyan]

Hi Steffen, 

Thanks for contacting Syncfusion support. 

We have validated your query. The cause for the reported script error will be occurred when the culture is not loaded properly. We have prepared working sample with German culture as per your requirement. Please find below for your reference. 

<DateRangePickerComponent id="daterangepicker" locale='de'></DateRangePickerComponent> 

loadCldr( 

  require('cldr-data/supplemental/numberingSystems.json'), 

  require('cldr-data/main/de/ca-gregorian.json'), 

  require('cldr-data/main/de/numbers.json'), 

  require('cldr-data/main/de/timeZoneNames.json'),  

  require('cldr-data/supplemental/weekData.json')); // To load the culture based first day of week 

 

L10n.load({ 

  'de': { 

    'daterangepicker': { 

      applyText: 'Sich bewerben', 

      cancelText: 'Stornieren', 

      customRange: 'benutzerdefinierten Bereich', 

      days: 'Tage', 

      endLabel: 'Wählen Sie Enddatum', 

      placeholder: 'Wählen Sie einen Bereich aus', 

      selectedDays: 'Ausgewählte Tage', 

      startLabel: 'Wählen Sie Startdatum' 

    } 

  } 

}); 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DateRangePickerGlobalization1726181257  

Kindly check with the above sample. Please get back us if you need further assistance.  

Regards,  

Ponmani M 

[Steffen Harbich]

Please read my requirement carefully. I was clearly stating that it doesn't work in my nextjs application. I already tested it without nextjs which was working fine.

It would be really helpful if you could provide an example with nextjs included. I suspect that nextjs is the problem. Maybe the server-side rendering or something.

Regards,

Steffen

[Ponmani Murugaiyan]

Hi Steffen, 

Sorry for the inconvenience. 

We have tested DateRangePicker component with German culture in nextjs application. It’s working as expected in our end. For your reference, we have attached the test sample in the below link.  

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/DateRangePicker733417727  

 

Note: Please download the sample from the above link and run the below commands. 

1. “npm install” command to install the required packages
2. “npm install cldr-data” command to install cldr packages.
3.  “npm run dev” command to launch the application in browser.

 

Kindly check with the above sample. If issue still exists in your end, please provide the issue reproducing sample to check and provide you the exact solution at our end. 

 

Regards, 

Ponmani M 

 

 

[Steffen Harbich]

Thanks for the demo project. I am trying to replicate my issue using your project as base. I updated all dependencies to latest versions.

Question:

When I use "import"s for cldr data instead of "require" method (see attachement) then it doesn't work and will show the error mentioned in my initial post. Do you know why?

Then I tried to use "require" in my nextjs app and made the following observations:

• the calender input in filter of a date grid column is working fine now (was also getting an error before), i.e. the cldr data is picked up correctly
  
• the DateRangePicker is still not working with "locale='de'" (same error)
• the DateRangePicker doesn't pick up the locale set by "setCulture('de')"

Unfortunately, I cannot reproduce the issue so far with the project you provided. I will continue to try and report back. But maybe you already have an idea what is going wrong here? It seems like the DateRangePicker doesn't have any context from ej2 base i18n things.

Attachment: DateRangePicker_f21724dc.zip

EDIT: Observation: Seems like components other than DateRangePicker have no problem using the set culture on the same page.

[Ponmani Murugaiyan]

Hi Steffen, 

Thanks for your detailed information. 

We able to replicate the reported issue when using the import’s for cldr data, we will check and update on this. Until then we suggest you to use the require to load cldr data to get rid of the reported issue. Also please get back us if you need further assistance on loading culture with require in DateRangePicker localization with nextjs application. 

Regards, 

Ponmani M