Getting error: Cannot read property 'connectionStatus$' of undefined

We are trying to integrate voicebot using SPFX with react in SharePoint.

We are referring Directline speech sample.

We are using below version of SPFX and botframework-webchat. SPFX version: 1.10 “botframework-webchat”: “4.10.0”

Please Find Code Snippet

import * as React from "react";
import {ApplicationCustomizerContext} from '@microsoft/sp-application-base';
import { DirectLine } from "botframework-directlinejs";
import ReactWebChat, { createCognitiveServicesSpeechServicesPonyfillFactory, createDirectLine, createDirectLineSpeechAdapters, createStore } from "botframework-webchat";
import { AadTokenProvider } from '@microsoft/sp-http';
import updateIn from 'simple-update-in';
import { environment } from "../../environment/environment";
import { Logger, LogLevel } from "@pnp/logging";
import { AdaptiveCard, IAdaptiveCardActionResult} from "../../AdaptiveCard";



export interface IReactFooterProps {
  upn: string;
  aadToken: string;
  userTimeZoneName: string;
  dContext: ApplicationCustomizerContext;
    
}
let notificationParams: any;
let savedActivity: any=null;
export default class ReactFooter extends React.Component<IReactFooterProps,{adapters:{}}> {
  
    private directLine: DirectLine;
    private token: string;
    private store: null;
    public adaptersObj:any;
    private templateJson: string;
    private user:any;
    
     
    constructor(props: IReactFooterProps) {
      super(props);
      this.state={adapters:{}};
      this.user={ id:props.upn, name: props.dContext.pageContext.user.displayName };

//OTHER CODE
      }
    public async componentDidMount() {
     
      
      const fetchCredentials = async () => {
        var myHeaders = new Headers();
        myHeaders.append("Ocp-Apim-Subscription-Key", "<subscription key>");
        myHeaders.append("Ocp-Apim-Subscription-Region", "westeurope");


        const res = await fetch('https://westeurope.api.cognitive.microsoft.com/sts/v1.0/issueToken',  {
          method: 'POST',
          headers:myHeaders,redirect: 'follow'
        });

        if (!res.ok) {
          throw new Error('Failed to fetch authorization token and region.');
        }

        const authorizationToken  = await res.text();

        return { authorizationToken, region:'westeurope' };
      };
        this.adaptersObj=await createDirectLineSpeechAdapters({
        fetchCredentials
      })
      this.setState({ adapters: this.adaptersObj });
      
      }
      
    public render() : JSX.Element{
        return (
            <ReactWebChat  {...this.state.adapters}  store={this.store} userID={this.user.id} username={this.user.name}
            styleOptions={{
            bubbleBackground: '#0184D7',
            bubbleTextColor:'#FFFFFF',
            bubbleBorderRadius:'5',            
            bubbleFromUserBackground: '#e8e8e8',            
            bubbleFromUserBorderRadius:'5',            
            botAvatarImage:BeeahImg,
            userAvatarImage: EmployeeImg,
            sendBoxBackground:"#E8E8E8 0% 0% no-repeat padding-box",
            hideUploadButton:true}}/>
        );
    }
}

Error We are Getting:

[compulim]

Discussed offline, tl;dr the web page was not passing the chat adapter (DLSpeech in this case) when rendering Web Chat initially. Thus, Web Chat went into a stopped state and console-logging connectionStatus$ is undefined.

Technically:

• The page render Web Chat without the chat adapter in initial pass
• Web Chat stopped because lacking of chat adapter
  • Since they are using 4.7, it only show “javascripterror” on the topic of the page
  • In newer version of Web Chat, we have a better error message (a.k.a. red line of text)
• On subsequent rendering pass, the web page passed the chat adapter to Web Chat
• Since Web Chat already stopped, even the adapter was passed, Web Chat is already in a stopped state

The web page should pass the chat adapter to Web Chat as outlined in sample 03.a. If the chat adapter is not available, they should use loader/spinner before rendering Web Chat.

[jayarau]

Hi @dmvtech , any update on this, are you able to reproduce issue.