AdaptiveCardHost not working for SPFx 1.18.2 (and later)

[wilecoyotegenius]

Category

[ ] Enhancement

[X ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 3.19.0 ]

Expected / Desired Behavior / Question

AdaptiveHostControl does not work in projects using SPFx 1.18.2 and later. All works fine for various samples in sp-dev-fx-webparts repo, that use an older version of SPFx and node. Unfortunately, when trying to use the control on a brand new project, it fails miserably.

Observed Behavior

Whole web part using the control fails to load correctly.

Following error message may be found in the console:

Steps to Reproduce

My configuration: node -v
v16.18.1 (but I have also used node 18.20.4 and 18.17.1 with no success) npm -v 8.19.2

1. Scaffold new web part project. Used React as framework, remaining questions answered with defaults. yo @microsoft/sharepoint

2. Add latest @pnp/spfx-controls-react package npm i @pnp/spfx-controls-react

3. Extend IHelloWorldProps.ts by context property

import { BaseComponentContext } from "@microsoft/sp-component-base";

export interface IHelloWorldProps {
  description: string;
  isDarkTheme: boolean;
  environmentMessage: string;
  hasTeamsContext: boolean;
  userDisplayName: string;
  context: BaseComponentContext;
}

4. Update render method in HelloWorldWebPart.ts code to pass context to the component

...
export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

  private _isDarkTheme: boolean = false;
  private _environmentMessage: string = '';

  public render(): void {
    const element: React.ReactElement<IHelloWorldProps> = React.createElement(
      HelloWorld,
      {
        description: this.properties.description,
        isDarkTheme: this._isDarkTheme,
        environmentMessage: this._environmentMessage,
        hasTeamsContext: !!this.context.sdks.microsoftTeams,
        userDisplayName: this.context.pageContext.user.displayName,
        context: this.context
      }
    );

    ReactDom.render(element, this.domElement);
  }
...

5. HelloWorld.tsx is as simple as it gets - component renders AdaptiveCardHost trying to display a very simple AdaptiveCard. Code has been copied straight from the documentation page. I have tried various cases, with and without data and AC templating - none of them worked.

import * as React from 'react';
import type { IHelloWorldProps } from './IHelloWorldProps';
import { AdaptiveCardHost } from "@pnp/spfx-controls-react/lib/AdaptiveCardHost";

export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  public render(): React.ReactElement<IHelloWorldProps> {

    const card = {
      type: "AdaptiveCard",
      body: [
        {
          type: "TextBlock",
          text: "Text",
        }
      ],
      version: "1.0",
      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    }
    return (
      <AdaptiveCardHost
        card={card}
        onInvokeAction={(action) => alert(JSON.stringify(action))}
        onError={(error) => alert(error.message)}
        context={this.props.context as any}
      />
    );
  }
}

6. Build the package and drop it to App Catalog. gulp build gulp bundle --ship gulp package-solution --ship

7. Add an App to the site. No issues at any point,

8. Add the webpart to a page. Web part fails to render. What is interesting, it's not even hitting debugger in the web part's onInit or render methods. So it's like the whole bundle is broken... The moment I comment out AdaptiveCardHost from the component all starts working fine.

Has anyone else observed this behavior?