Issue with adaptivecards-templates

[patilravikiran]

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