ES6 import of mse does work in React applications

[Akshay-Adluri]

The following example shows the implementation of the mse events. I don't see it working as mentioned in the documentation.
https://experienceleague.adobe.com/en/docs/commerce/product-recommendations/getting-started/headless.

There is work around I have tried by adding magentoStorefrontEvents to window object. By adding this line I can see events are being emitted by the sdk. But does not seems to be reliable. Can you guys check if the implementation is correct. Else if there issue can you fix it. Please cross check it's implementation in next js as well.

Thanks

Code Snippet:

import React, { useEffect } from 'react';
import './App.css';
import { Page, Product } from "@adobe/magento-storefront-events-sdk/dist/types/types/schemas";
import { StorefrontInstance } from "@adobe/magento-storefront-events-sdk/dist/types/types/schemas/storefrontInstance";

import mse from "@adobe/magento-storefront-events-sdk";
import "@adobe/magento-storefront-event-collector";

declare global {
  interface Window {
    magentoStorefrontEvents: any;
  }
}


// window.magentoStorefrontEvents = mse;

function App() {  

  useEffect(() => {
    const pageContext: Page = {
      pageType: "Home",
      pageName: "Home Page",
      maxXOffset: 0,
      maxYOffset: 0,
      minXOffset: 0,
      minYOffset: 0,
      ping_interval: 0,
      pings: 0,
    };

    const productContext: Product = {
      productId: 123,
      name: "Example Product",
      sku: "example-sku",
    };

    const storefrontInstance: StorefrontInstance = {
      environmentId: "abc",
      environment: "Testing",      
      instanceId: "abc",
      websiteId: 1,
      storeId: 1,
      storeViewId: 1,
      storeUrl: "https://abc.com.au",
      websiteCode: "1",
      storeCode: "1",
      storeViewCode: "abc",
      websiteName: "abc",
      storeName: "abc",
      storeViewName: "abc",
      baseCurrencyCode: "AUD",
      storeViewCurrencyCode: "AUD",
      storefrontTemplate: "Other"
    };

    mse.context.setStorefrontInstance(storefrontInstance);
    console.log("after set",mse.context.getContext());

    // // Publish the event
    mse.context.setPage(pageContext);
    mse.context.setProduct(productContext);
    mse.publish.pageView();
    mse.publish.productPageView();

  }, []);

  return (
    <div className="App">
      <section style={{ marginTop: 32 }}>
        <div> Products Recommendations</div>
        <div>Check Network tab in devtool and filter for tp2</div>
      </section>
    </div>
  );
}

export default App;