nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.33k stars 1.37k forks source link

[BUG] - Date Picker value prop throws type error #3148

Closed kennyqiyenkan closed 2 months ago

kennyqiyenkan commented 3 months ago

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

Screenshot 2024-05-31 at 11 28 12 AM (2)

Operating System Version

macOS

Browser

Chrome

linear[bot] commented 3 months ago

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

wingkwong commented 3 months ago

looks like this vendor.founded could be null or undefined

kennyqiyenkan commented 3 months ago

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

wingkwong commented 3 months ago

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

kennyqiyenkan commented 3 months ago

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 commented 3 months ago

Thanks. I'll have a look tomorrow.

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