How to use custom tag with React-based application

Recently, I encountered trouble integrating the Google Generative App into a React-based application. The main issue was that the Google Generative App is a web component, which should be used as a custom tag. Since I have a Next.js application, I faced a problem during the build process: it failed, citing the use of an unknown custom tag.

Here is a way to bypass the build issue and inform the application about the custom tag.

// better to add this into d.ts file or in the original component file
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'gen-search-widget': React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & {
        configId: string;
        location: string;
        triggerId: string;
      },
        HTMLElement
      >;
    }
  }
}

// component with custom tag
export const CustomTagComponent = () => {
  return (
    <gen-search-widget
  configId="***"
  location="eu"
  triggerId="***"
    />
);
};

After adding this fix, Webpack no longer complains during the build process, allowing you to successfully deliver your custom tag.

Find out more useful content at:

• Twitter
• Github

Any feedback, contribution, or help is highly appreciated.

Thanks for your time and happy coding! 👋