Type Error in @headlessui/react

I am trying to use Headless UI Select component in a Chrome extension & it gives error: ReferenceError: process is not defined as process.nextTick is used.

Is there anyway I can bypass that as process is not available in Chrome extensions I think? Or maybe can you guys polyfill it? Or I am just a minority.

Edit: I couldn’t find process.nextTick being used 😃

[RobinMalfait]

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

The TypeScript error that you are receiving is a known issue that has been fixed but not fully released yet. However, if you do want to make use of the fix, try using the dev build: yarn add @headlessui/react@dev or npm install @headlessui/react@dev.

Yeah the process issue can’t be ours, because we don’t use process inside the components 😅

[deadcoder0904]

Here’s my Select component that doesn’t work:

Select.tsx

interface IProps {
	label?: string
	options: Array<{
		id: number
		name: string
	}>
}

export const Select = ({ label, options }: IProps) => {
	const [selectedOption, setSelectedOption] = React.useState(options[0])

	return (
		<Listbox value={selectedOption} onChange={setSelectedOption}>
			<Listbox.Button>{selectedOption.name}</Listbox.Button>
			<Listbox.Options>
				{options.map((option) => (
					<Listbox.Option key={option.id} value={option}>
						{option.name}
					</Listbox.Option>
				))}
			</Listbox.Options>
		</Listbox>
	)
}

I get this error (red-squiggly line) on value of value={option}:

Type ‘{ id: number; name: string; }’ is not assignable to type ‘(string & { id: number; name: string; }) | (number & { id: number; name: string; }) | (readonly string[] & { id: number; name: string; })’. Type ‘{ id: number; name: string; }’ is not assignable to type ‘readonly string[] & { id: number; name: string; }’. Type ‘{ id: number; name: string; }’ is missing the following properties from type ‘readonly string[]’: length, concat, join, slice, and 16 more.

I even tried doing value={option.name} but then the select element gets removed from DOM.

App.tsx

const shapes = [
	{
		id: 1,
		name: 'Circle',
	},
	{
		id: 2,
		name: 'Square',
	},
]

<Select label="Shape" options={shapes} />

And the one that works has const shapes = ['Circle', 'Square'] & respective changes in Select.tsx 😃

The weird thing is the one that doesn’t work in Chrome extension works in Codesandbox → https://codesandbox.io/s/headlessuireact-listbox-example-forked-lbct7?file=/src/App.js

And now the error ReferenceError: process is not defined is gone. It only hides the Select box entirely from the DOM after 1st selection.