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 ? — Daniele Ricci
– Daniele Ricci, Commented Nov 24, 2020 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
– Rowe Morehouse, Commented Mar 16, 2021 at 14:34

101arrowz · Accepted Answer · 2020-11-24 23:40:22Z

4

+100

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.

answered Nov 24, 2020 at 23:40

101arrowz

1,9159 silver badges18 bronze badges

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

Comments

Glen Carpenter · Accepted Answer · 2020-11-27 14:55:58Z

0

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.

answered Nov 27, 2020 at 14:55

Glen Carpenter

4123 silver badges9 bronze badges

Collectives™ on Stack Overflow

Integrating Polymer Web Components into React app written in Typescript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related