How to add custom HTML tag TSX

Question

While trying to render a custom HTML tag <my-element> in JSX an error displayed Property does not exist on type 'JSX.IntrinsicElements'

I've found some examples of how to do that using

declare global {
  interface IntrinsicElements {
    "my-element": any
  }
}

but this produced another error:

ES2015 module syntax is preferred over custom TypeScript modules and namespaces @typescript-eslint/no-namespace

blackbrandt · Accepted Answer · 2019-07-16 13:08:36Z

4

I've found the useful link to Typescript guide which helped me a lot:

The main idea is to create a new file with extension d.ts (e.g. myModule.d.ts) which should contain the following

export as namespace JSX;

export interface IntrinsicElements {
  "my-element": any;
}

blackbrandt

2,1251 gold badge19 silver badges37 bronze badges

answered Jul 16, 2019 at 12:58

Vasilii P

3693 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1