Compatibility issue with adaptivecards-templating and adaptive-expressions

[JaccovdP]

Problem description

The latest adaptivecards-templating and adaptive-expressions packages seem incompatible. Following the docs for javascript as provided here results in Uncaught TypeError: $ is not a function. I'm using the packages in Angular.

Manually setting the version of adaptive-expressions to 4.22.3 resolves the error, but I would like to to use the latest version.

Repro

Stackblitz

Code

Please refer to Stackblitz above for full repro.

import { Component, OnInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import * as ACData from 'adaptivecards-templating';
import * as AdaptiveCards from 'adaptivecards';

@Component({
  selector: 'app-root',
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>

    <div id="container"></div>
  `,
})
export class App implements OnInit {
  name = 'Angular';

  ngOnInit() {
    const templatePayload = {
      type: 'AdaptiveCard',
      version: '1.0',
      body: [
        {
          type: 'TextBlock',
          text: 'Hello ${name}!',
        },
      ],
    };

    const template = new ACData.Template(templatePayload);

    const cardPayload = template.expand({
      $root: {
        name: 'Example card',
      },
    });

    const adaptiveCard = new AdaptiveCards.AdaptiveCard();
    adaptiveCard.parse(cardPayload);
    const renderedCard = adaptiveCard.render();
    if (renderedCard)
      document.getElementById('container')?.appendChild(renderedCard);
  }
}

bootstrapApplication(App);

Stacktrace

Uncaught TypeError: $ is not a function
    at 668.../internals/export (browser.js:87213:7)
    at o (browser.js:35:19)
    at browser.js:37:20
    at 781.../modules/es.global-this (browser.js:91907:7)
    at o (browser.js:35:19)
    at browser.js:37:20
    at Object.<anonymous> (browser.js:82285:11)
    at Object.<anonymous> (browser.js:82301:12)
    at 522.@babel/runtime/helpers/interopRequireDefault (browser.js:82302:10)
    at o (browser.js:35:19)

[Prasad-MSFT]

@JaccovdP, thanks for raising your issue. We will check and get back to you shortly.

[Prasad-MSFT]

Hi @JaccovdP, according to this,

Before version 2.0, the adaptivecards-templating package embedded a full copy of the adaptive-expressions package. This model didn't allow an application to use Adaptive Card templating with a more recent version of adaptive-expressions, and bug fixes in adaptive-expressions would always have to be accompanied with a new release of the adaptivecards-templating package.

From version 2.0 on, adaptivecards-templating doesn't embed adaptive-expressions anymore, and it is the responsibility of the consuming application to explicitly load this package.

[JaccovdP]

Hi @Prasad-MSFT, thanks for looking into it. I'm aware of that section of the docs. However, the issue is that adaptivecards-templating has a dependency on adaptive-expressions of ^4.11.0 which is satisfied by installing the latest version of adaptive-expressions (4.23.1). However, using that version results in the error as shown in the repro.

[markDrigola]

I'm getting the same error.

[Prasad-MSFT]

Hi @JaccovdP, @markDrigola - A bug has been raised for this issue. We will inform you once we get any further update from engineering team. Thanks!

[MrCodeWeaver]

I too am having this exact same issue with version compatability between adaptivecards-templating and adaptive-expressions. @Prasad-MSFT any update on this issue from the engineering team

[ThiramAdmin]

Now getting below error. Error rendering Adaptive Card: TypeError: v7 is not a function