MetaMask/snaps

issue: issues with custom JSX UI types

Closed this issue · 5 comments

martines3000 commented

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:
image

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 commented

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

  • 👍1
martines3000 commented

@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 commented

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

  • ❤️1
martines3000 commented

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 commented

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

  • ❤️1