[BUG] - Date Picker value prop throws type error

[kennyqiyenkan]

NextUI Version

2.4.0

Describe the bug

Currently using:
"next": "^14.2.3"
"@internationalized/date": "^3.5.4"

Also referred to a previous Bug report but I am already type casting the useState.

Code:

import { DateValue, parseDate } from '@internationalized/date'
import { DatePicker } from '@nextui-org/date-picker'

const VendorBasicDetailsForm = (/*...*/) => {
  /*...*/
  const [foundedDate, setFoundedDate] = useState<DateValue>(
    parseDate(vendor.founded || '2024-01-01')
  )
  return (
    /*...*/
    <DatePicker
      value={foundedDate}
      onChange={setFoundedDate}
    />
    /*...*/
  )
}

Other things of note:

1. Running the application loads the component fine when running yarn dev
2. Running yarn build fails due to the error

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Install NextUI v2.4.0
2. Install @internationalized/date v3.5.4
3. Follow the instructions for controlled DatePicker

Expected behavior

Not expecting type errors

Screenshots or Videos

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-935 [BUG] - Date Picker value prop throws type error

[wingkwong]

looks like this vendor.founded could be null or undefined

[kennyqiyenkan]

@wingkwong, even when not using vendor.founded and just using a string date, the type error persists.

[wingkwong]

sounds weird. can you setup a stackblitz project? I couldn't reproduce the issue on my side.

[kennyqiyenkan]

Okay, after some digging into @internationalized/date and the specific error I am encountering, it turns out that because I am using the latest version of the package (3.5.4), it conflicts with NextUI's version of the package(3.5.2). After downgrading the @internationalized/date package, the error goes away. Here is the link to the discussion.

Maybe updating the docs would suffice?

p/s: NextJS 14 did not like stackblitz 😅.

[wingkwong]

Thanks. I'll have a look tomorrow.

p.s. next14 uses swc and it fails in stackblitz. we use codesandbox for next14 apps.