[bug] Property 'w3m-button' does not exist on type 'JSX.IntrinsicElements'.

[mdesousa]

Link to minimal reproducible example

https://docs.reown.com/appkit/react/core/installation

Summary

Hi, we are following the steps in the installation. We use vite and typescript and are trying to use the w3m-button component as shown towards the end. The application actually works when we run npm run dev but it won't build in typescript and gives the following error: Property 'w3m-button' does not exist on type 'JSX.IntrinsicElements'.

Are there any extra-steps missing that are needed to make the build aware of the w3m-button component?

Thanks!

List of related npm package versions

@reown/[email protected] @reown/[email protected] [email protected]

[mdesousa]

i think i found the solution, just add an import to my project as follows:

import '@reown/appkit/react';

[x0good]

I received this error Property 'w3m-button' does not exist on type 'JSX.IntrinsicElements'

after upgrading from nextjs 14 --> 15 and react 18 -> 19-rc

[webel]

@x0good idk if still relevant for you, but the w3m naming is deprecated in favour of appkit. So appkit-button.

[x0good]

@webel yes, with appkit-button the same warning in vscode

Property 'appkit-button' does not exist on type 'JSX.IntrinsicElements'

[elix1er]

bump, same still

[DrHongos]

Anyone has a fix for this? Can´t find where to import this components with appkit and vercel build breaks..

[webel]

I reckon you add it to some global.d.ts, something like

declare global {

  namespace JSX {

    interface IntrinsicElements {

      'appkit-button':
React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;

    }

  }

}

On Sat, Dec 14, 2024 at 3:49 AM Lucas Ziegenfuhs @.***> wrote:

Anyone has a fix for this? Can´t find where to import this components with appkit and vercel build breaks..

— Reply to this email directly, view it on GitHub https://github.com/reown-com/appkit/issues/3093#issuecomment-2542687713, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABANI4ADULDF7N5CC4BPKPL2FOMDHAVCNFSM6AAAAABQAJ2KWSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNBSGY4DONZRGM . You are receiving this because you were mentioned.Message ID: @.***>

[DocBadTouch]

For anyone still struggling with this, I found that adding these ignore statements works. Seems to work for w3m-button also.

<div>
   {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
   {/* @ts-ignore */}
   <appkit-button/>
</div>       

[dylanngph]

Same issue here with Nextjs15 react 19. Property 'appkit-button' does not exist on type 'JSX.IntrinsicElements'

[tunarollchef]

Yeah +1 on this issue.

[Q6Crypto]

Same issue here

[rtomas]

Added how to solve this issue to next/react docs and into the next example ...