How to fix the “Property does not exist on type ‘DetailedHTMLProps, HTMLDivElement>’” error with React and TypeScript?

Sometimes, we want to fix the “Property does not exist on type ‘DetailedHTMLProps, HTMLDivElement>’” error with React and TypeScript.

In this article, we’ll look at how to fix the “Property does not exist on type ‘DetailedHTMLProps, HTMLDivElement>’” error with React and TypeScript.

How to fix the “Property does not exist on type ‘DetailedHTMLProps, HTMLDivElement>’” error with React and TypeScript?

To fix the “Property does not exist on type ‘DetailedHTMLProps, HTMLDivElement>’” error with React and TypeScript, we can extend the react module’s types using a declare statement.

For instance, in a .d.ts file, we write

declare module "react" {
  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
    custom?: string;
  }
}

to add the custom property into the HTMLAttributes interface.

Then we can add the custom attribute into the HTML elements in our React project.

Conclusion

To fix the “Property does not exist on type ‘DetailedHTMLProps, HTMLDivElement>’” error with React and TypeScript, we can extend the react module’s types using a declare statement.