[@zag-js/tags-input]: Type mismatch when consuming machine

[Hugos68]

🐛 Bug report

Given this code:

import { normalizeProps, useMachine } from '@zag-js/react';
import { type Api, connect, machine, type Props } from '@zag-js/tags-input';
import { useId } from 'react';

export function useTagsInput(props: Omit<Props, 'id'>): Api<PropTypes> {
	const service = useMachine(machine, {
		id: useId(),
		...props,
	});
	return connect(service, normalizeProps);
}

tsc returns the following type error:

Argument of type 'Machine<TagsInputSchema>' is not assignable to parameter of type 'Machine<MachineSchema>'.
  Types of property 'props' are incompatible.
    Type '((params: PropsParams<TagsInputSchema>) => RequiredBy<TagsInputProps, PropsWithDefault>) | undefined' is not assignable to type '((params: PropsParams<MachineSchema>) => MachineBaseProps | undefined) | undefined'.
      Type '(params: PropsParams<TagsInputSchema>) => RequiredBy<TagsInputProps, PropsWithDefault>' is not assignable to type '(params: PropsParams<MachineSchema>) => MachineBaseProps | undefined'.
        Types of parameters 'params' and 'params' are incompatible.
          Type 'PropsParams<MachineSchema>' is not assignable to type 'PropsParams<TagsInputSchema>'.
            Types of property 'props' are incompatible.
              Type 'Partial<MachineBaseProps | undefined>' is not assignable to type 'Partial<RequiredBy<TagsInputProps, PropsWithDefault>>'.
                Type 'undefined' is not assignable to type 'Partial<RequiredBy<TagsInputProps, PropsWithDefault>>'.

💥 Steps to reproduce

I was unable to reproduce this in Typescript Playground, maybe you guys know why I can't reproduce this?

💻 Link to reproduction

CodeSandbox reproduction: -

🧐 Expected behavior

It shouldn't error

🧭 Possible Solution

🌍 System information

Software	Version(s)
Zag Version	1.24.0
Browser	Chrome
Operating System	Windows 11

📝 Additional information

This is our tsconfig.json:

{
	"compilerOptions": {
		"esModuleInterop": true,
		"skipLibCheck": true,
		"target": "es2022",
		"allowJs": true,
		"resolveJsonModule": true,
		"moduleDetection": "force",
		"isolatedModules": true,
		"verbatimModuleSyntax": true,
		"strict": true,
		"noUncheckedIndexedAccess": true,
		"noImplicitOverride": true,
		"declaration": true,
		"declarationMap": true,
		"module": "preserve",
		"noEmit": true,
		"lib": ["es2022", "dom", "dom.iterable"],
		"jsx": "react-jsx",
		"jsxImportSource": "react",
		"types": ["@testing-library/jest-dom/vitest"],
		"paths": {
			"@/*": ["./src/*"]
		}
	},
	"include": ["src", "test"]
}

[segunadebayo]

This type error is a symptom of multiple or mismatching versions of @types/react. Please check and dedupe as needed.

[Hugos68]

I don't quite understand what you mean by mismatch, mistmatch between the package.json versions and ... ?

[Hugos68]

For context, this is our package.json:

	"dependencies": {
		"@skeletonlabs/skeleton-common": "workspace:*",
		"@zag-js/accordion": "catalog:",
		"@zag-js/avatar": "catalog:",
		"@zag-js/file-upload": "catalog:",
		"@zag-js/progress": "catalog:",
		"@zag-js/rating-group": "catalog:",
		"@zag-js/react": "catalog:",
		"@zag-js/tags-input": "catalog:",
		"@zag-js/switch": "catalog:",
		"@zag-js/tabs": "catalog:",
		"@zag-js/toast": "catalog:"
	},
	"peerDependencies": {
		"react": "^18.0.0 || ^19.0.0",
		"react-dom": "^18.0.0 || ^19.0.0"
	},
	"devDependencies": {
		"@testing-library/jest-dom": "catalog:",
		"@testing-library/react": "catalog:",
		"@types/react": "catalog:",
		"@types/react-dom": "catalog:",
		"@vitejs/plugin-react": "catalog:",
		"jsdom": "catalog:",
		"react": "catalog:",
		"react-dom": "catalog:",
		"tsdown": "catalog:",
		"typescript": "catalog:",
		"vite": "catalog:",
		"vitest": "catalog:"
	}

And catalog version are defined as so:

  '@types/react': ^19.1.1
  '@types/react-dom': ^19.1.1
  ...
  react: ^19.1.1
  react-dom: ^19.1.1

[segunadebayo]

I probably misunderstood your issue. I see what you mean now.

Could you create a Stackblitz reproduction of this? Feels like some TS config option we need to align with

[Hugos68]

@segunadebayo I tried creating one but failed to do so. I checked a lot of stuff and it ended up being a error on our side, sorry!

pnpm cached @zag-js/react at 1.24.0 and @zag-js/tags-input at 1.24.1 even though both were specified as 1.24.0. I think that is what caused the type issue. This cache was both present locally and in our pipeline. Forcing pnpm to update to 1.24.1 for all packages fixed the issue.