search

tailwindlabs / tailwindui-issues

Bug fixes and feature request tracking for Tailwind UI.
233 stars 4 forks source link

DialogPanel in component #1578

Closed kldeb closed 3 months ago

kldeb commented 3 months ago

What component (if applicable)

Describe the bug DialogPanel is no longer in headlessui, should be updated to Dialog.Panel

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Browser/Device (if applicable)

Additional context Add any other context about the problem here.

reinink commented 3 months ago

Hey! I think I know what you're bumping into here.

We recently updated all the React components in Tailwind UI to use Headless UI v2.0 — the latest version of our headless UI library.

In v2.0 we deprecated the "dot notation" for all our components (things like Dialog.Panel and Menu.Button), as doing this causes issues with React Server Components and bundler tree-shaking. Meaning all our components now have explicit exports, like DialogPanel and MenuButton.

I'd highly recommend upgrading to the latest version of Headless UI:

npm install @headlessui/react@latest

You can find a detailed upgrade guide here:

https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v2.0.0

It looks long, but honestly it's really not that bad of an upgrade — there's a bunch of deprecations and only a few actual breaking changes.

Totally get how this is kind of annoying if you have an existing project based on Tailwind UI components, but we've always felt that it's important for Tailwind UI to use the latest version of our open source libraries.

Hope that makes sense! Let me know if you bump into any other issues 👍

kldeb commented 3 months ago

oh, thanks!