Task Module Shows blank teams with validDomain

Question

so I send an adaptive card with submitting action on my bot framework, that submit action have invoked action. When the TaskModuleContinueResponse is set to card the task module is working fine, but when I Used my NRGROK URL for the TaskModuleContinueResponse it will only show blank. I already add my NGROK URL in the valid domains, when I see the NGROK inspect I don't see my page being called. Here is my manifest

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.9/MicrosoftTeams.schema.json",
  "manifestVersion": "1.9",
  "version": "1.0.0",
  "id": "1c07cd26-a088-4db8-8928-ace382fa219f",
  "packageName": "Some.microsoft.teams.companycommunicator.authors",
  "developer": {
    "name": "Some",
    "websiteUrl": "https://somewebsite.com",
    "privacyUrl": "https://somewebsite.com",
    "termsOfUseUrl": "https://somewebsite.com"
  },
  "icons": {
    "color": "color.png",
    "outline": "outline.png"
  },
  "name": {
    "short": "Announce (Authors)",
    "full": "Company Announce (Authors)"
  },
  "description": {
    "short": "Broadcast messages to multiple teams and people in one go",
    "full": "Broadcasts messages to multiple teams and individuals through channel posts and chat messages"
  },
  "accentColor": "#64A2CC",
  "configurableTabs": [
    {
      "configurationUrl": "https://b0837b7151f7.ngrok.io/configtab",
      "canUpdateConfiguration": true,
      "scopes": [
        "team"
      ],
      "context": [
        "channelTab"
      ]
    }
  ],
  "bots": [
    {
      "botId": "eae687a6-936c-4fd7-ade7-1f01b388ac16",
      "scopes": [
        "team"
      ],
      "commandLists": [
        {
          "scopes": [
            "team"
          ],
          "commands": [
            {
              "title": "Test",
              "description": "Test bot trigger"
            }
          ]
        }
      ],
      "supportsFiles": true,
      "isNotificationOnly": false
    }
  ],
  "permissions": [
    "identity",
    "messageTeamMembers"
  ],
  "validDomains": [
    "b0837b7151f7.ngrok.io",
  ],
  "webApplicationInfo": {
    "id": "eae687a6-936c-4fd7-ade7-1f01b388ac16",
    "resource": "api://b0837b7151f7.ngrok.io"
  }
}

and here is my code for the task module I using ASP Net core

protected override async Task<TaskModuleResponse> OnTeamsTaskModuleFetchAsync(ITurnContext<IInvokeActivity> turnContext, TaskModuleRequest taskModuleRequest, CancellationToken cancellationToken)
{
    var reply = MessageFactory.Text("OnTeamsTaskModuleFetchAsync TaskModuleRequest: " + JsonConvert.SerializeObject(taskModuleRequest));
    await turnContext.SendActivityAsync(reply);

    return new TaskModuleResponse
    {
        Task = new TaskModuleContinueResponse
        {
            Value = new Microsoft.Bot.Schema.Teams.TaskModuleTaskInfo()
            {
                //Card = CreateAdaptiveCardAttachment(),
                Url = "https://b0837b7151f7.ngrok.io/details",
                FallbackUrl = "https://b0837b7151f7.ngrok.io/details",
                Height = 800,
                Width = 1000,
                Title = "Details",
            },
        },
    };
}

And for my page is just simple hello world.

import React, { Component } from 'react'
import * as microsoftTeams from "@microsoft/teams-js";

export default class SeeDetail extends Component {

    componentDidMount() {
        microsoftTeams.initialize();
    }
    
    render() {
        return (
            <div>
                <center>
                    <h1>Hello World</h1>
                </center>
            </div>
        )
    }
}

I don't know why like its been blocked or something because I don't see any request to my page on the NGROK Inspect. Is there something missing here

Answer 1

I have tried with your code it's working.

Please check in browser is your react page rendering correctly in browser when you call using https://b0837b7151f7.ngrok.io/details and try to render a page by generating a new ngrok Url.

Also check by adding your react page url in task module working sample.

If the issue still persists then try by deleting the existing app and upload your manifest again in teams App studio.