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?

[fabiofranzini]

Thanks for sharing! I'll check in the coming days

[wilecoyotegenius]

I have just tested latest version of the library with following versions of spfx/node

• spfx 1.15.2, node 16.18.1
• spfx 1.17.4, node 16.18.1
• spfx 1.20.0, node 18.18.2

None of the combinations work.

[wilecoyotegenius]

I have tried with 3.18.0 of the library, spfx 1.19.0 and node 18.18.2. This time it didn't even bundle correctly:

[wilecoyotegenius]

Did one more test - cloned master branch of this repo and built it on node 18.18.2. ControlsTest web part from built into the library project failed to load with the same error as any of my projects.

I can see that ControlsTest.tsx was last changed just 3 weeks ago. So it looks like it is working for other people (otherwise someone would have spotted the issue earlier).

@michaelmaillot - I have noticed that you were the last one committing changes to ControlsTest.tsx. Will you be so kind and share your dev machine configuration (node version, etc.)? Maybe this issue is related to machine's config...

[wilecoyotegenius]

Dear @fabiofranzini, have you had a chance to look at the issue?
I am desperate to get this one working, so if you have any solution ideas but lacking time to implement them, PM me and I'll do the hard work for you.

[fabiofranzini]

I @wilecoyotegenius i'll check this morning 🙂

[michaelmaillot]

@michaelmaillot - I have noticed that you were the last one committing changes to ControlsTest.tsx. Will you be so kind and share your dev machine configuration (node version, etc.)? Maybe this issue is related to machine's config...

Hi @wilecoyotegenius,

I made some tests on my side with the following results (Node version 18.20.3):

• SPFx webpart sample: KO
  • Sample version: 1.19
  • PnP Controls version: 3.19
• SPFx webpart sample: OK
  • Sample version: 1.18.2
  • PnP Controls version: 3.19
• PnP Controls: KO
  • Version: 1.19

I also tried to npm link local version of the Controls to the SPFx webpart 1.19 sample, without issue repro.

Regarding the webpack [object Object] error, there's something on the tracks from SPFx gulp tools (it's not related to the Controls repo), hope to get this fixed soon.

I couldn't figure out why this doesn't work on SPFx 1.19 except what explained before. Maybe @fabiofranzini will have a clue on the root cause.

[wilecoyotegenius]

Thank you for looking at this @michaelmaillot,

I have just started from scratch, with node 18.20.3, SPFx sample web part 1.18.2, PnP Controls 3.19 and it failed to work exactly the same way my previous tries did (with no errors during bundling or packaging).

How is it possible that having the same configuration of an environment and project may lead to different bundles, of which one is working fine and other one does not?

What am I missing?

[fabiofranzini]

Hi @wilecoyotegenius I found the error!
The problem is this:

Generate by the latest versione of the "adaptive-expressions" 4.23.0

Now let me check how to resolve

[michaelmaillot]

You're probably right @fabiofranzini, as my sample is referring to version 4.22.3 without encountering issues.

Now that you mention it, maybe we should freeze the version of this package for stability?

For now it's declared like this in the Controls:

https://github.com/pnp/sp-dev-fx-controls-react/blob/master/package.json#L63

[wilecoyotegenius]

I have just tested and indeed all works fine, when "adaptive-expressions" is set to 4.22.3 and fails with 4.23.0.
I have created a pull request to lock down the package on 4.22.3

[michaelmaillot]

This update should be available in next beta release.

Thanks again for finding the root cause @fabiofranzini & for the PR @wilecoyotegenius!

[fabiofranzini]

We probably need to remove the reference to adaptive-expressions from package.json because it is never used anywhere in the project. The adaptive-expressions template has its own reference and is enough. This needs more tests of course!

[wilecoyotegenius]

adaptivecards-designer and adaptivecards-templating have both a peer dependency for adaptive-expressions set to ^4.11.0.

If we remove adaptive-expressions from package.json, this will cause adaptive-expressions peer dependency resolve to latest (and breaking) version for adaptivecards-designer and adaptivecards-templating.

I made a following test:

Here's npm ls --depth=1 with adaptive-expressions in package.json

And here's, once I have uninstalled the package adaptive-expressions:

adaptive-expressions are deduped into 4.23.1 version.

As expected, after uninstalling/removing adaptive-expressions from package.json, ControlsTest web part stopped working.