pnp / sp-dev-fx-controls-react

Reusable React controls for SPFx solutions
https://pnp.github.io/sp-dev-fx-controls-react/
MIT License
385 stars 379 forks source link

AdaptiveCardHost not working for SPFx 1.18.2 (and later) #1876

Open wilecoyotegenius opened 2 months ago

wilecoyotegenius commented 2 months ago

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. image

Following error message may be found in the console: image

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 {

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

public render(): void { const element: React.ReactElement = 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 {

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 commented 2 months ago

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

wilecoyotegenius commented 2 months ago

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

None of the combinations work.

wilecoyotegenius commented 2 months ago

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:

image

wilecoyotegenius commented 2 months ago

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.

image

image

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 commented 1 month ago

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 commented 1 month ago

I @wilecoyotegenius i'll check this morning 🙂

michaelmaillot commented 1 month ago

@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):

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 commented 1 month ago

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 commented 1 month ago

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

image

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

image

Now let me check how to resolve

michaelmaillot commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

This update should be available in next beta release.

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

fabiofranzini commented 1 month ago

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 commented 1 month ago

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

image

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 image

And here's, once I have uninstalled the package adaptive-expressions: image adaptive-expressions are deduped into 4.23.1 version.

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