Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TypeError: Super expression must either be null or a function #2855

Closed
rambabuk1222 opened this issue Jan 27, 2020 · 9 comments
Closed

TypeError: Super expression must either be null or a function #2855

rambabuk1222 opened this issue Jan 27, 2020 · 9 comments
Assignees
@stevkan
Labels
Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. customer-replied-to Required for internal reporting. Do not delete. customer-reported Required for internal Azure reporting. Do not delete.

Comments

@rambabuk1222
Copy link

Deployed angular site with webchat. It's working fine in Edge browser but not in chrome and firefox.
console showing following error message. Is anyone used angular with webchat?

image
@rambabuk1222 rambabuk1222 added Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. Pending customer-reported Required for internal Azure reporting. Do not delete. labels Jan 27, 2020
@stevkan
Copy link
Contributor

stevkan commented Jan 28, 2020

Hi @rambabuk1222, if you could provide a few items, that would be great for my helping diagnose the problem:

  • package.json
  • The Botbuilder version you are using
  • A link to the code, repo, or other, you used to build your app
  • Any docs you were following or referring to

Thanks!

@compulim
Copy link
Contributor

compulim commented Jan 31, 2020 •
edited
Loading

@rambabuk1222 do you know which version of Web Chat you are using? This will greatly help us on identifying the issue.

Also, do you know the version of Angular you are using?

@rambabuk1222
Copy link
Author

rambabuk1222 commented Jan 31, 2020 •
edited
Loading

@stevkan
Hi Steve, Thanks for your response. please find the package.json below

package.txt

Bot Builder version: 4.6.3
I have fallowed this article

@compulim
Hi William,

I'm using below version of webchat.js
https://cdn.botframework.com/botframework-webchat/4.5.1/webchat.js
I'm using angular version 7.3.3

@daveta
Copy link

daveta commented Feb 4, 2020

Thanks @rambabuk1222. FYI: @stevkan is taking a look..

@stevkan
Copy link
Contributor

stevkan commented Feb 6, 2020

At this moment, I'm unable to repro the issue. Can you tell me which version of Chrome and Firefox browser you are using, in case it is a factor?

@compulim
Copy link
Contributor

compulim commented Feb 6, 2020 •
edited
Loading

Me neither. I did the follow steps.

Create Angular 7 app

npx @angular/cli@7 new my-app

This created an Angular 7.2.16 app.

Modify src/app/app.component.ts

- import { Component } from '@angular/core';
+ import { Component, ViewChild, ElementRef } from '@angular/core';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'my-app';
+
+   @ViewChild('botWindow') botWindowElement: ElementRef;

+   public ngOnInit(): void {
+     const { botWindowElement } = this;
+     (async function () {
+       const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
+       const { token } = await res.json();
+
+       window['WebChat'].renderWebChat({
+         directLine: window['WebChat'].createDirectLine({ token })
+       }, botWindowElement.nativeElement);
+     })();
+   }
  }

Modify src/app/app.component.html

  <!--The content below is only a placeholder and can be replaced.-->
  <div style="text-align:center">
    <h1>
      Welcome to {{ title }}!
    </h1>
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  </div>
  <h2>Here are some links to help you start: </h2>
  <ul>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a> 
 </h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a> 
 </h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
    </li>
  </ul>

+ <div class="webchat-container" #botWindow></div>

Modify src/index.html

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MyApp</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
+   <script src="https://cdn.botframework.com/botframework-webchat/4.5.1/webchat.js"></script>
  </head>
  <body>
    <app-root></app-root>
  </body>
  </html>

Firefox screenshot

image

@compulim
Copy link
Contributor

compulim commented Feb 6, 2020

After enabling Cognitive Services, now I am seeing the same error.

image

@rambabuk1222
Copy link
Author

@stevkan
Hi Steven,

Im using chrome version 79.0.3945.130
I hosted this angular site in azure and rendering this azure site from wordpress site iframe. If I run azure site directly, its working without ussue.

Thanks and Regards
Ram

@compulim
Copy link
Contributor

compulim commented Feb 6, 2020

There are 2 problems, when combined, it become what you saw in F12.

Problem 1: bad error message

In Web Chat 4.5.1, if speech is enabled but not supported, it throw Super expression must either be null or a function. The error message is fixed >= 4.6.0.

Problem 2: Feature Policy is not set

When you host a page under <IFRAME>, by default, Chrome and Firefox will block microphone access. This is a new feature introduced by Chrome and Firefox called Feature Policy. And not implemented in Edge UWP.

Summary

When you host the Azure site under an <IFRAME> on WordPress, without configuring Feature Policy, microphone is blocked. Thus, you are seeing Super expression must either be null or a function because Web Chat cannot enable speech.

Please follow this article to enable microphone access to the <IFRAME> hosting Web Chat.

@cwhitten cwhitten added the customer-replied-to Required for internal reporting. Do not delete. label Feb 6, 2020
@cwhitten cwhitten closed this as completed Feb 6, 2020
@corinagum corinagum mentioned this issue Mar 14, 2020
Open
37 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@stevkan stevkan

Labels
Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. customer-replied-to Required for internal reporting. Do not delete. customer-reported Required for internal Azure reporting. Do not delete.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@cwhitten @compulim @daveta @rambabuk1222 @stevkan