How to use Polaris web component with react and jsx

Hydrogen and Storefront APIs
1

So i am using just plain react with tailwindjs. no remix. i want use web components there. i have basic setup in my index.html

 <body>

    <div id="root"></div>

<!-- Shopify Store Configuration -->

<shopify-store

store-domain="https://shop.myshop.club"

public-access-token="token"

country="IN"

language="en"

></shopify-store>

<shopify-cart id="main-cart"></shopify-cart>

<script type="module" src="/src/main.tsx"></script>

</body>

currently i am using checkout for single product by like this:

 useEffect(() => {

    if (!document.getElementById("shopify-checkout-context")) {

const context = document.createElement("div");

context.id = "shopify-checkout-context";

context.style.display = "none";

context.innerHTML = `

        <shopify-context 

          type="product" 

          handle="my-super-products"

        >

          <template>

            <button 

              id="shopify-buy-now-btn"

              onclick="document.querySelector('shopify-store').buyNow(event)"

              style="display:none"

            >

              Buy Now

            </button>

          </template>

        </shopify-context>

      `;

document.body.appendChild(context);

    }

  }, []);




const handleEnrollNow = () => {

const buyBtn = document.getElementById("shopify-buy-now-btn") as any;

if (buyBtn) {

buyBtn.click();

    }

  };

and it works. but it is just a workaround.

if i try to use webcomponents like example in docs. i get lots of type error.
Property ‘shopify-media’ does not exist on type ‘JSX.IntrinsicElements’.ts(2339)
Property ‘shopify-list-context’ does not exist on type ‘JSX.IntrinsicElements’.ts(2339)

for every web component tag

 <shopify-list-context type="product" query="products" first="20">

          <template>

<div className="coach-card">

<div className="coach-card__media">

<shopify-media

width="280"

height="280"

query="product.selectedOrFirstAvailableVariant.image"

></shopify-media>

</div>

<div className="coach-card__details">

<h2 className="coach-card__name">

<shopify-data query="product.title"></shopify-data>

</h2>

<div className="coach-card__price">

<shopify-money query="product.selectedOrFirstAvailableVariant.price"></shopify-money>

</div>

<button

className="coach-card__view-btn"

onClick={handleViewDetails}

>

                  View Details

</button>

</div>

</div>

</template>

</shopify-list-context>

i have installed pnpm i -D @shopify/polaris-types and added it in my tsconfig file plus i am using /// in top of this file. still i am getting type error.

2

Hey,
You’ll likely need to extend your JSX types to support the web components for example

3

thanks but it did not work. even after extending like this. i followed the doc but still no luck.

4

Can you share the extra .d.ts file you created following the guides I shared? Please

Did you include this in your tsconfig

5

This doesn’t appear to be Polaris web components; instead it looks like Storefront components. Storefront Web Components

1 Like