Unable to use Web Components in React

Question

I'm trying to use some web components inside a React application. However, React is not able to detect the web component tags.

import React from "react";
import "./App.css";
import "@vaadin/vaadin-button";
import "@vaadin/vaadin-text-field";

function App() {
  return (
    <div className="App">
      <vaadin-text-field label="First Name" ref="firstName" />
      <vaadin-text-field label="Last Name" ref="lastName" />
      <vaadin-button ref="addButton"> Add </vaadin-button>
    </div>
  );
}

export default App;

I'm getting errors like,

Property 'vaadin-text-field' does not exist on type 'JSX.IntrinsicElements'.

Do I need to use Reactify-WC to be able to use WebComponents in React?

Answer 1

Assuming that is a Typescript compile error. You need to add typescript declarations to your react-app-env.d.ts

declare namespace JSX {
    interface IntrinsicElements {
        'vaadin-text-field': { 'prop': any };
        'vaadin-button d': { 'prop': any };
    }
}

or possibly at the top of the file