Integrating Polymer Web Components into React app written in Typescript?

Question

Trying to integrate a Polymer Web Components tooltip feature into a React App written in TypeScript.

On compile, it is throwing error Property 'paper-tooltip' does not exist on type 'JSX.IntrinsicElements'

So, trying to get the <paper-toooltip> into the JSX namespace, I created this file:

Tooltip.txs:

import * as React from 'react'

declare global {
    namespace JSX {
        interface IntrinisicElements {
            'paper-tooltip': { Tooltip: string }
        }
    }
}

export default Tooltip;

What am I doing wrong here?

Also, I understand in React/TypeScript there is issue with components are required to start with capital letter, like "I" … this is adding to my confusion, I don't understand.

Could you please provide us a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) ? — Daniele Ricci, Nov 24 '20 at 17:50
I'm still working on this. Will open the project soon and try some of the suggestions here and report back. :) — Rowe Morehouse, Mar 16 '21 at 14:34

score 2 · Answer 1 · answered Nov 24 '20 at 23:40

It's a typo. You wrote IntrinisicElements instead of IntrinsicElements when merging the interface.

declare global {
    namespace JSX {
        interface IntrinsicElements {
            'paper-tooltip': { Tooltip: string }
        }
    }
}

From my testing, this was the only issue, but if that was just a typo when pasting the question, it's probably an issue with config.

score 0 · Answer 2 · answered Nov 27 '20 at 14:55

It seems that your issue may be the - in the component name paper-clip. You cannot include a - in component names because when initializing the component it breaks Javascript variable naming conventions: https://www.w3schools.com/js/js_variables.asp

// invalid variable name
const paper-clip = ()=> {
  // return JSX here
}

So, either you are declaring paper-clip incorrectly, or it is not a component.

Integrating Polymer Web Components into React app written in Typescript?

2 Answers2