Facing Issue while establishing a connection with Web Chat 4 with SPFx

[Siri311]

Description

Created a SPFx web part using react and did the npm install like below npm install --save botframework-webchat npm install --save botframework-directlinejs

After the imported required things and then

var botConnection = new DirectLine({
      domain:'<domain>',
      secret: "<secret key>"
    });
var user = {id:this.props.context.pageContext.user.Eamil, name: this.props.context.pageContext.user.displayName}

return (<div style={{height:400}}>

      <RenderWebChat directline = {botConnection} user={user} />

      </div>
    );

Error Details

createStore.ts:16 TypeError: Cannot read property 'connectionStatus$' of undefined
    at connectionStatusToNotification$ (connectionStatusToNotificationSaga.js:24)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:274)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at next (redux-saga-core.esm.js:1157)
    at proc (redux-saga-core.esm.js:1108)
    at redux-saga-core.esm.js:585
    at immediately (redux-saga-core.esm.js:56)
    at runForkEffect (redux-saga-core.esm.js:584)
    at runEffect (redux-saga-core.esm.js:1204)

Thanks in advance

[vishwacsena]

@Siri311 can you clarify what version you are on?

@compulim can you take a look and comment?

[dmvtech]

Is this just a typo in this post, or is this incorrect in your code as well? id:this.props.context.pageContext.user.Eamil

Aside from that, this is essentially what I have setup and working:

  public render(): React.ReactElement<IBotWebPartProps> {
    //Current User information from Context
    var user = { id: this.props.context.pageContext.user.email, name: this.props.context.pageContext.user.displayName };
    const { directLink, store } = this.state;

    return (
      <div className={styles.botFrameworkChat} style={{ height: 500 }}>
        <ReactWebChat directLine={directLink} store={store} userID={user.id} username={user.name} />
      </div>
    );
  }

[Siri311]

Version Details

Package.json --File (dependencies)

"@microsoft/sp-core-library": "1.9.1",
"@microsoft/sp-lodash-subset": "1.9.1",
"@microsoft/sp-office-ui-fabric-core": "1.9.1",
"@microsoft/sp-webpart-base": "1.9.1",
"@pnp/common": "^1.3.11",
"@pnp/logging": "^1.3.11",
"@pnp/odata": "^1.3.11",
"@pnp/sp": "^1.3.11",
"@types/es6-promise": "0.0.33",
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"@types/webpack-env": "1.13.1",
"botframework-directlinejs": "^0.12.0",
"botframework-webchat": "^4.8.0",
"office-ui-fabric-react": "6.189.2",
"react": "16.8.5",
"react-dom": "16.8.5",
"xhr2": "^0.2.0"

[Siri311]

Code

constructor(props) { super(props); this.state = { directLine: createDirectLine({ domain:'<>', secret: "<>", webSocket:true }), store:createStore({},function(_ref){ const dispatch = _ref.dispatch; return function (next) { return function (action) { if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {

        }
        if (action.type === 'DIRECT_LINE/DISCONNECT_FULFILLED') {
            //console.log('store: direct line disconnected');
        }

        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
            console.log('store: direct line connected');
        }

        return next(action);
    };
};
  })
};

}

public render(): React.ReactElement { this.user = {id:this.props.context.pageContext.user.email, name:this.props.context.pageContext.user.displayName} return (
"<"ReactWebChat directline = {this.state.directLine} store={this.state.store} userID={this.user.id} userName={this.user.name}" />"

);

}

Error Details

TypeError: Cannot read property 'connectionStatus$' of undefined at connectionStatusToNotification$ (connectionStatusToNotificationSaga.js:24) at tryCatch (runtime.js:45) at Generator.invoke [as _invoke] (runtime.js:274) at Generator.prototype. [as next] (runtime.js:97) at next (redux-saga-core.esm.js:1157) at proc (redux-saga-core.esm.js:1108) at redux-saga-core.esm.js:585 at immediately (redux-saga-core.esm.js:56) at runForkEffect (redux-saga-core.esm.js:584) at runEffect (redux-saga-core.esm.js:1204)

Still facing same issue. Please find the attached screenshots. Failed in the middle ware( createStore.ts, connectionStatusNotification.js)

[Siri311]

Missed ReactWebChat in above comment

"<" ReactWebChat directline = {this.state.directLine} store={this.state.store} userId={this.user.id} userName={this.user.name}"> "

[compulim]

Can you check if this.state.directLine is undefined or an object?

connectionStatus$ is retrieved from an object created through createDirectLine function.

The error stack in your code pointed to this line, https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/core/src/sagas/connectionStatusToNotificationSaga.js#L24.

[Siri311]

this.state.directLine is a object, please find the attached screenshot.

[compulim]

There is a typo:

- <ReactWebChat directline = {this.state.directLine} ...
+ <ReactWebChat directLine = {this.state.directLine} ...

[Siri311]

Thanks for the quick response. Issue Resolved. Thank You William Wong.

It is not working In IE browser. i found article like below.

Web Chat has no plan to support samples for IE11 (ES5). For customers who wish to manually rewrite our other samples to work in IE11, we recommend looking into converting code from ES6+ to ES5 using polyfills and transpilers like babel.

is there sample to make it work with IE Browser.

Thanks in Advance.

[compulim]

Can you look at this issue, https://github.com/microsoft/BotFramework-WebChat/issues/2511?

As you are on NPM, your code should already target ES5/IE11. Maybe you are missing a few polyfills, as outlined in #2511. (Please vote on the issue if it resolve your problem 😉)

For the article you referenced: to make sample code shorter and easier to read, they are written to be as lean as possible. Thus, we prefer to use latest syntax from latest ES revisions. And developers "downgrade" or transpile them to ES versions they need.

[dmvtech]

Closing as the main issue is resolved and you have steps needed to get working in IE11.