All Articles

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;

// component with custom tag
export const CustomTagComponent = () => {
  return (

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:

Any feedback, contribution, or help is highly appreciated.

Thanks for your time and happy coding! 👋

Published Apr 15, 2024

Passionate software engineer with expertise in software development, microservice architecture, and cloud infrastructure.