Adaptive Card works locally but fails when deployed in Azure

Question

I've built a Teams app with a notification bot that uses adaptive cards. The interaction with the adaptive card works perfectly in my local environment:
1-I receive the card in teams.

2-I interact with the card successfully.

3-The card gets refreshed with the new one.

However, when the solution is deployed in the azure app services(Windows OS), it fails in step 3 and the card doesn't get refreshed and shows a message saying Something went wrong. Please try again..
Here is the relevant code(I to focus in onAdaptiveCardInvoke event):

const { TeamsActivityHandler, StatusCodes, MessageFactory, CardFactory, ActivityTypes } = require("botbuilder");
const { updateInstanceState } = require("./merlinOperations");
const { successInteractionStatusChange } = require('./adaptiveCards/templates');
const { InvokeResponseFactory } = require("@microsoft/teamsfx");
const { HttpStatusCode } = require("axios");
const { AdaptiveCard } = require("@microsoft/adaptivecards-tools");


// An empty teams activity handler.
// You can add your customization code here to extend your bot logic if needed.
class TeamsBot extends TeamsActivityHandler {
  constructor() {
    super();

    this.onMessage(async (context, next) => {

      if (context.activity.name === "adaptiveCard/action") {

        let invokeResponse = await this.onInvokeActivity(context);

        await context.sendActivity({
          type: ActivityTypes.InvokeResponse,
          value: invokeResponse,
        });
      }
      else {
        await context.sendActivity("Este bot es solo para generar notificaciones desde merlin");
      }

      //This next calls the next event(Middleware) in case we have many of them.
      await next();
    });
  }

  async onAdaptiveCardInvoke(context) {
    try {
      //Here we confirm the interaction came from an adaptive card
      if (context.activity.name === "adaptiveCard/action") {

		//Internal logic that returns the refreshed card.       

        let invokeResponse = InvokeResponseFactory.adaptiveCard(successInteractionStatusChange);
        
        invokeResponse.statusCode = StatusCodes.OK;
        
        await context.sendActivity({
          type: ActivityTypes.InvokeResponse,
          value: invokeResponse,
        });
        return invokeResponse;


      }
    } catch (error) {
      //If there was any error we go ahead an throw a toaster with saying an erro has occured
      console.info("###ERROR ocurrió en el invoke ", error)
      const cardRes = {
        statusCode: StatusCodes.OK,
        type: 'application/vnd.microsoft.error',
        value: { message: `ha ocurrido un error ${error.message}` }
      };

      const res = {
        status: StatusCodes.OK,
        body: cardRes
      };
      return res;
    }
  };
}

module.exports.TeamsBot = TeamsBot;

Any insights on why the interaction works locally but fails in Azure would be appreciated.

Here is the post in StackOverflow:

https://stackoverflow.com/questions/78513742/adaptive-card-works-locally-but-fails-when-deployed-in-azure

Answer 1

I found that the reason why the card was not rendered in the cloud was because the new card had 3 empty containers that somehow flew the answer when trying to get rendere.

Before:

After:

Conclusion, I removed the empty containers and the flow started to work in the cloud.