issue: issues with custom JSX UI types

[martines3000]

Hi. We recently tried upgrading from the old UI to the new JSX UI, but we are having some issues.

I get the following error when trying to use the new components:

Link to source code: https://github.com/blockchain-lab-um/masca/blob/fc77fc3e85f2ec127900f9812bfe5911208df48a/packages/snap/src/UI.service.tsx#L50

Branch: chore/upgrade-snap-jsx

Any ideas what could be wrong here ?

This issues is happening with almost all component types.

Thank you for the help.

[Montoya]

Hi @martines3000 did you follow these steps when migrating your Snap code? https://docs.metamask.io/snaps/features/custom-ui/#upgrade-a-snap-to-use-jsx

[martines3000]

@Montoya Yes, we followed the mentioned guide.

1. We use @metamask/snaps-sdk": "6.9.0"
2. We added "jsx": "react-jsx", "jsxImportSource": "@metamask/snaps-sdk" to compiler options
3. We renamed the corresponding file from .ts to .tsx
4. We don't use eslint, so not changes were necessary there.

[FrederikBolding]

@martines3000 You likely need to add these dependencies too: #2700 (comment)

[martines3000]

This solved our issue. Thank you 🙏 .

Sorry that I missed the discussion, I only looked in the "issues" tab 😓.

I will close this issue as it is resolved.

[FrederikBolding]

We'll make sure to document this better, you are definitely not the first person to reach out about this!