TypeError of Dialog and Dialog.Title from the official example

[xsjcTony]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.7

What browser are you using?

Chrome v108

Reproduction URL

https://headlessui.com/react/dialog 's main example

My screenshots below used totally the same copy-pasted code without any modification

Describe your issue

TypeScript version: ^4.9.4,
Vite: ^4.0.2,
All packages' versions are the latest

className throwing TypeError if as has been set (it works if as is not defined)

tsc --noEmit result

[xsjcTony]

I found the problem, which is because I originally set

allowSyntheticDefaultImports to false in tsconfig.json

After I changed it to true, the issue is gone.

---

But I still want to use false for that value, any solution on that?

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Can you create a minimal reproduction repo and attach it to the issue?

[xsjcTony]

@RobinMalfait Hey, here it is
https://stackblitz.com/edit/vitejs-vite-kksxtq?file=src/headlessuiDemo/Demo.tsx

So basically it's because I set allowSyntheticDefaultImports to false and that's exactly what I want, but seems like headless not UI does not support that.
I reckon the type system is using some allowSyntheticDefaultImports-only import syntax so that's why. Please inspect, thanks a lot.

[xsjcTony]

@RobinMalfait Hey, sorry to bother you, but I can see the "Needs more info" tag is still there, not sure if my update has been seen.

[xsjcTony]

I think the cause might be dts file used the syntax that requires allowSyntheticDefaultImports to be turned on, e.g.

import React from 'react'

Not sure if there will be a fix to import * as React from 'react' or use named import instead for that.

[RobinMalfait]

This should be fixed, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.

[RobinMalfait]

The changes applied to fix this issue broke some existing applications. Re-opened the issue for now so that we can keep track of it. If we can't find a solution that both fixes this issue and keeps the existing applications from working than this issue will be closed with a "Won't fix".

[RobinMalfait]

I don't immediately see a way for us to fix this without breaking existing applications. Going to close it for now, but maybe pick this up later when necessary.

For now you have 2 options I think:

• Use the specific insiders version that did have support for it (even though this would lack newer features and bug fixes)
• Or use the allowSyntheticDefaultImports flag and set it to true in tsconfig.json. I believe this is also the default in various scenarios already so dropping it might be enough.

Sorry for the inconvenience, hope this helps!