Required property 'timeZone' missing or undefined React `CalendarInput` Component

Title: “Error with CalendarInput Component: ‘required property ‘timeZone’ missing or undefined’”

Hello Community,

I am currently working on application using React and have integrated the DHIS2 UI library for various components. However, I’ve encountered an issue when trying to use the CalendarInput component.

Error Message:

ERROR
required property 'timeZone' missing or undefined
TypeError: required property 'timeZone' missing or undefined
    at PrepareTemporalFields (http://localhost:3000/static/js/bundle.js:137726:32)
    at ToTemporalZonedDateTime (http://localhost:3000/static/js/bundle.js:138046:15)
    at ZonedDateTime.from (http://localhost:3000/static/js/bundle.js:144895:201)
    at http://localhost:3000/static/js/bundle.js:33115:103
    at mountMemo (http://localhost:3000/static/js/bundle.js:106169:23)
    at Object.useMemo (http://localhost:3000/static/js/bundle.js:106426:20)
    at useMemo (http://localhost:3000/static/js/bundle.js:122132:25)
    at useCalendarWeekDays (http://localhost:3000/static/js/bundle.js:33102:56)
    at useDatePicker (http://localhost:3000/static/js/bundle.js:33469:114)
    at Calendar (http://localhost:3000/static/js/bundle.js:2343:99)

My Code:

import React from 'react';
import { CalendarInput } from '@dhis2/ui';

const MyComponent = () => {
    return (
        <div>
            <CalendarInput
                calendar="ethiopic"
                date="2019-01-01"
                dir="ltr"
                locale="am-ET"
                timeZone="Europe/London"
                onChange={console.log}
            />
        </div>
    );
};

export default MyComponent;

What I’ve Tried:

  1. Double-checked the documentation to ensure I’m using the component correctly.
  2. Attempted to pass different timezone formats to the timeZone prop.
  3. Searched through community forums and GitHub issues for similar errors but haven’t found a solution.
  4. Verified that I have set the timeZone prop on the CalendarInput component.

Additional Information:

  • DHIS2 App Runtime Version: 3.10.4
  • Operating System: Ubuntu 20.04

It seems like there might be an issue with how I’m implementing the timeZone prop or there might be another underlying problem. Could someone please guide me on how to correctly use the timeZone prop with the CalendarInput component or provide any other insights on resolving this error?

@mozafar

Solution

I found a solution to the issue of the required property 'timeZone' missing or undefined error when using the CalendarInput component.

The problem can be resolved by updating the @dhis2/cli-app-scripts package to the latest version. Here are the steps:

  1. Open your package.json file.
  2. Update the @dhis2/cli-app-scripts dependency to the latest version. At the time of writing, the latest version is 11.5.1.
"@dhis2/cli-app-scripts": "^11.5.1"
  1. Save the package.json file.
  2. Run yarn install to update your dependencies.

To check for the latest version, you can visit this link.

After updating, your application should no longer encounter the required property 'timeZone' missing or undefined error.

2 Likes

Amazing, thanks for sharing! :slight_smile:

1 Like

Looks like you were indeed on a version that had a broken UI component. You can find more details here: [LIBS-543] - Jira

The actual fix is to update the UI library to at least version 8.9.8

Relevant PR:

2 Likes