JSX Typescript errors

[hugomrdias]

All the jsx components with text children make ts throw the error below.

error TS2322: Type '{}' is not assignable to type 'BoxProps & { key?: Key | null | undefined; }'.
  Property 'children' is missing in type '{}' but required in type 'BoxProps'.

import {
  Address,
  Bold,
  Box,
  Heading,
  type SnapComponent,
  Text,
} from '@metamask/snaps-sdk/jsx'
export const HomePage: SnapComponent = () => {
  return (
    <Box>
      <Heading>Alert heading</Heading>
      <Text>ddddddddd</Text>
      <Address address="0x1234567890123456789012345678901234567890" />
    </Box>
  )
}

// tsconfig.json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "dist",
    "jsx": "react-jsx",
    "jsxImportSource": "@metamask/snaps-sdk"
  },
  "include": ["src", "test"]
}

repro here https://github.com/hugomrdias/mm-jsx-repro

[ziad-saab]

Can you please add these two lines to the devDependencies of your Snap, then run yarn install? We're working on a more long-term solution

    "@types/react": "18.2.14",
    "@types/react-dom": "18.2.4",