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

sunosuporno · 2024-12-10T20:39:48Z

sunosuporno
Dec 10, 2024

Getting this error (the title) in my code. My Navbar where I am using it and getting the error at looks like this:

"use client";
import Image from "next/image";
import Link from "next/link";
import { useState, useEffect } from "react";

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <nav className="flex justify-between items-center px-4 sm:px-10 md:px-20 py-4 sm:py-5 bg-[#202020] border-b border-white/10">
      <Link href="/" className="flex items-center gap-2 sm:gap-4">
        <div className="w-10 h-10 sm:w-12 sm:h-12">
          <Image
            src="/images/logo.svg"
            alt="YieldHive Logo"
            width={48}
            height={48}
            priority
            className="w-full h-full"
          />
        </div>
        <span className="text-xl sm:text-2xl font-medium text-white tracking-wide">
          YieldHive
        </span>
      </Link>

      {/* Desktop Connect Button */}
      <div className="hidden sm:block min-w-[150px]">
        {mounted && <appkit-button label="Connect Wallet" />}
      </div>

      {/* Mobile Menu Button */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="sm:hidden text-white"
      >
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d={isOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"}
          />
        </svg>
      </button>

      {/* Mobile Menu */}
      {isOpen && (
        <div className="absolute top-[72px] left-0 right-0 bg-[#202020] border-b border-white/10 sm:hidden">
          <div className="p-4">
            {mounted && <appkit-button label="Connect Wallet" />}
          </div>
        </div>
      )}
    </nav>
  );
}

This is my layout page, this is where I think something is going wrong regarding passing the props.

  return (
    <html lang="en">
      <body className={`${jura.variable} font-jura`}>
        <AppKitProvider cookies={cookies}>
          <div className="min-h-screen bg-[#202020]">
            <nav className="fixed top-0 left-0 right-0 z-50 bg-[#202020] border-b border-white/10">
              <Navbar />
            </nav>
            <main className="pt-[64px]">{children}</main>
          </div>
        </AppKitProvider>
      </body>
    </html>
  );

The code is running fine in dev server. But the error is popping up when I am trying to deploy in Vercel

AjayiMike · 2025-01-01T01:02:45Z

AjayiMike
Jan 1, 2025

Let me explain the error and solution in a clear, step-by-step way

The Problem:

The error occurs because TypeScript doesn't recognize appkit-button as a valid HTML element. This is common when using Web Components.

The Solution:

Create a file called custom-elements.d.ts (or any name ending in .d.ts) in your project root and add this code:

import React from "react";
declare module "react" {
   namespace JSX {
       interface IntrinsicElements {
           "appkit-button": React.DetailedHTMLProps<
               React.ButtonHTMLAttributes<HTMLButtonElement> & {
                   disabled?: boolean;
                   balance?: "show" | "hide";
                   size?: "md" | "sm";
                   label?: string;
                   loadingLabel?: string;
               },
               HTMLButtonElement
           >;
       }
   }
}

What This Does:

.d.ts files are TypeScript declaration files
This code tells TypeScript that appkit-button is a valid HTML element
It defines what props the element can accept - in this case, standard HTML attributes, and the props of the component as defined in the docs here https://docs.reown.com/appkit/next/core/components#appkit-button-

After Adding the File
You don't need to import it anywhere
TypeScript will automatically pick it up.

If you're using another web component later, don't forget to include it also.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reown

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

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Reown

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

sunosuporno Dec 10, 2024

Replies: 1 comment

AjayiMike Jan 1, 2025

Let me explain the error and solution in a clear, step-by-step way

The Problem:

The Solution:

What This Does:

sunosuporno
Dec 10, 2024

AjayiMike
Jan 1, 2025