CODEWITHSUNDEEP
reactjstypescriptpolymerweb-componentgoogle-web-component
Rowe Morehouse
Rowe Morehouse

Reputation: 4585

Integrating Polymer Web Components into React app written in Typescript?

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.

Upvotes: 3

Views: 454

Answers (2)

Glen Carpenter
Glen Carpenter

Reputation: 412

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.

Upvotes: 0

101arrowz
101arrowz

Reputation: 1905

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.

Upvotes: 3

Related Questions