[Designer] Issue with adaptivecards

[patilravikiran]

Problem Description

I am facing issue with latest version of adaptivecards-template.

Error Message:
$ is not a function
TypeError: $ is not a function
at 668.../internals/export (http://localhost:3000/static/js/bundle.js:87745:7)
at o (http://localhost:3000/static/js/bundle.js:567:19)
at http://localhost:3000/static/js/bundle.js:569:20
at 781.../modules/es.global-this (http://localhost:3000/static/js/bundle.js:92439:7)
at o (http://localhost:3000/static/js/bundle.js:567:19)
at http://localhost:3000/static/js/bundle.js:569:20
at Object. (http://localhost:3000/static/js/bundle.js:82817:11)
at Object. (http://localhost:3000/static/js/bundle.js:82833:12)
at 522.@babel/runtime/helpers/interopRequireDefault (http://localhost:3000/static/js/bundle.js:82834:10)
at o (http://localhost:3000/static/js/bundle.js:567:19)

Package.json

{
  "name": "adaptive-card-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "adaptive-expressions": "^4.23.1",
    "adaptivecards": "1.3.1",
    "adaptivecards-templating": "2.3.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

App.js:

import React, { useEffect, useRef } from "react";
import * as AdaptiveCards from "adaptivecards";
import * as ACData from "adaptivecards-templating";
require("adaptive-expressions/package.json");

const App = () => {
  const cardRef = useRef(null);

  const cardTemplate = {
    type: "AdaptiveCard",
    version: "1.0",
    body: [
      {
        type: "TextBlock",
        text: "Hello ${name}!",
      },
    ],
  };

  const sampleData = {
    name: "John Doe",
  };

  useEffect(() => {
    const adaptiveCard = new AdaptiveCards.AdaptiveCard();

    // Host Config (Optional)
    adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
      fontFamily: "Segoe UI, Helvetica Neue, sans-serif",
    });

    // Handle action execution
    adaptiveCard.onExecuteAction = (action) => {
      alert(`Action executed: ${action.title}`);
    };

    // Create the template and expand it with sample data
    const template = new ACData.Template(cardTemplate);
    const cardPayload = template.expand({ $root: sampleData });

    // Parse and render the expanded card
    adaptiveCard.parse(cardPayload);
    if (cardRef.current) {
      cardRef.current.innerHTML = ""; // Clear previous content
      const renderedCard = adaptiveCard.render();
      cardRef.current.appendChild(renderedCard);
    }
  }, []);

  return (
    <div style={{ padding: "20px" }}>
      <h2>Adaptive Card Preview</h2>
      <div ref={cardRef} />
    </div>
  );
};

export default App;

Steps to replicate:

1. npx create-react-app adaptive-card-app
2. cd adaptive-card-app
3. npm install adaptivecards adaptivecards-templating
4. Replace the contents of the src/App.js file with the above App.js code
5. npm start

Card JSON

{
    type: "AdaptiveCard",
    version: "1.0",
    body: [
      {
        type: "TextBlock",
        text: "Hello ${name}!",
      },
    ],
  }

Screenshot

No response

[rafael-or]

I'm having a similar issue :

ERROR 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. (browser.js:82285:11)
at Object. (browser.js:82301:12)
at 522.@babel/runtime/helpers/interopRequireDefault (browser.js:82302:10)
at o (browser.js:35:19)

error happens when executing this line of code:

const template = new Template(CardPayload);

Packages:

"adaptive-expressions": "^4.17.0",
"adaptivecards": "^2.10.0",
"adaptivecards-designer": "^2.3.0",

[andrewconnell]

I submitted the issue ref'd by @hund030 in OfficeDev/teams-toolkit/issues/12506 ... I think the issue is rooted in the bundling of the adaptivecards-templating package, at least the error is showing up when the Create React App's build/bundling process kicks in.

[biplabm3]

I'm having the exact same issue while using it with react. Are there any workarounds or ways to solve this issue?

[AllEchse]

So, the issue seems to be that adaptivecard-templating hasn't been maintained for 2 years, while adaptive-expressions has been.

You need adaptive-expressions since version 2.0 of adaptivecard-templating, which is not in the dependencies, but in the description of the npm package.

At some point in the last 2 years the updates to adaptive-expressions have broken support for adaptive-templating.
After some testing it seems like version 4.22.3 of adaptive-expressions is the last version that works with adaptive-templating, which is 5 months old.