question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Typescript error with <Listbox>.

See original GitHub issue

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v0.3.2

What browser are you using?

Chrome

Issue

The following error shows up with @headlessui/react with Typescript v4.1.3 in a Next.js (v10) app that is also using Emotion. I found a similar issue #233 but neither of the solutions proposed worked for me. I’ll update this if I find a work around.

Expression produces a union type that is too complex to represent.

Screen Shot 2021-04-13 at 11 05 33 AM

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6

github_iconTop GitHub Comments

4reactions
tylerssssscommented, Apr 13, 2021

Ok so removing this line from tsconfig.json fixed it for me:

"jsxImportSource": "@emotion/react",

The other issue #233 mentioned this but I needed to restart VS Code after removing that line.

1reaction
AnandChowdharycommented, Apr 24, 2021

Unfortunately, even after removing this, I see this this error. Any other tips?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Typescript Error for a a function that takes multiple List Types
Now I have a simple function to group the customFunctions and fieldDefinitions based on their returType/valueType. First I've written separate ...
Read more >
listbox-with-typescript - CodeSandbox
CodeSandbox is an online editor tailored for web applications.
Read more >
@reach/listbox - npm
Start using @reach/listbox in your project by running `npm i ... TypeScript icon, indicating that this package has built-in type ...
Read more >
Drag and drop in TypeScript ListBox - Syncfusion
A list item can be moved from a widget to another ListBox widget. Also the order of list items can be changed. This...
Read more >
(Deprecated) Collapsible Dropdown Listbox Example - W3C
In its default state, the widget is collapsed (the listbox is not visible) and the button label shows the currently selected option from...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found