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?

The React website is very good, and worth searching when you have questions about fundamental React behaviour. https://reactjs.org/docs/web-components.html - not sure why you'd import anything though, just have your page HTML load the JS that sets up those web components (after all, they only mean anything in a web view, they certainly don't work in react native or the like) and they'll work when everything runs. React doesn't need to be told about them at all, you just need to make sure that by the time your JS app _runs_, those tags resolve to real elements. — Mike 'Pomax' Kamermans, Sep 01 '21 at 05:15
@Mike'Pomax'Kamermans Its not working that way, React needs to be told that there is a web component in the import section. — Chandra Eskay, Sep 01 '21 at 05:47
Given that I'm using web components in my React apps every single day: yeah it is. React doesn't need anything imported, your web page/view just needs to make sure that your web component was loaded before you load your react app. (_other_ tools might complain though, like a typescript compiler. But then that should probably be mentioned in the question). — Mike 'Pomax' Kamermans, Sep 01 '21 at 15:54
As example of this working perfectly fine without any imports, using the standard `create-react-app` project, see https://replit.com/@Pomax/GigaFlawlessVirtualmemory, where the app.js doesn't need to be told about the web components in the slightest, and index.html just makes sure they get loaded. — Mike 'Pomax' Kamermans, Sep 01 '21 at 16:06

score 5 · Accepted Answer · answered Sep 01 '21 at 06:54

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

Unable to use Web Components in React

1 Answers1