souce on image element gives a Typescript error

[tmyroadctfig]

I'm getting:

TS2322: Type '{ source: string; }' is not assignable to type 'SVGProps<SVGImageElement>'.
  Property 'source' does not exist on type 'SVGProps<SVGImageElement>'.

on something like:

  return (
    <div>
      <image source='https://picsum.photos/200' />
    </div>
  )

Also it seems unhappy about objectFit: TS2322: Type '"fit"' is not assignable to type 'ObjectFit'.

<image style={{ height: 300, objectFit: 'fit' }} source='https://picsum.photos/200' />

[KurtGokhan]

Looks like both of your issues might be caused by an incompatible Typescript setup. I suspect you might be using React 18.3 types, which I haven't tried updating yet.

[KurtGokhan]

I updated packages and ReactUnity types seems to be compatible with latest version of TS and React.

I suspect your tsconfig may not be set-up correctly. Here is a tsconfig file that should work well:

{
  "extends": "@reactunity/scripts",
  "compilerOptions": {
    "baseUrl": "./",
    "jsxImportSource": "@reactunity/renderer/ugui",
    "types": [
      "@reactunity/scripts/main"
    ]
  },
  "files": [
    "./src/index.tsx"
  ],
  "include": [
    "./src"
  ]
}

Also it seems unhappy about objectFit: TS2322: Type '"fit"' is not assignable to type 'ObjectFit'.

fit is not a correct value for objectFit. This was a mistake on docs, and now fixed. See MDN for correct values.

[tmyroadctfig]

Thank you, adding "jsxImportSource": "@reactunity/renderer/ugui", fixed the issue after I also bumped my nodejs version to v20 (🤷‍♂️).

This was a mistake on docs, and now fixed.

👍 I realised that afterwards, but it's good the docs have the typo fixed.

I suspect you might be using React 18.3 types

Yep, seems that way: "@types/react@^18.3.1":