[Designer] Issue with adaptivecards

patilravikiran commented 1 month ago

Problem Description

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

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:

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

Card JSON

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

Screenshot

No response

rafael-or commented 4 weeks ago

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

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 commented 3 days ago

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

microsoft / AdaptiveCards