I am encountering a "not defined" error despite the fact that I have declared the variable as "declare

function initiateWidget() {
    declare
    var WhWidgetSendButton;

    ngOnInit() {
        var options = {
            facebook: "xxxx", // Facebook page ID
            whatsapp: "xxx", // WhatsApp number
            call_to_action: "Message us", // Call to action
            button_color: "#008000", // Color of button
            position: "left", // Position may be 'right' or 'left'
            order: "whatsapp,facebook", // Order of buttons
        };
        var proto = document.location.protocol;
        var host = "whatshelp.io";
        var url = proto + "//static." + host;
        let s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = url + '/widget-send-button/js/init.js';

        s.onload = () => {
            WhWidgetSendButton.init(host, proto, options);
        };
        let x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    }
}

Answer №1

It appears that the variable WhWidgetSendButton is being declared without being assigned a value.

Basically, what's happening is WhWidgetSendButton = undefined, and then you're trying to execute .init(host, proto, options) on a variable that doesn't have a defined value.

Make sure to assign a value to WhWidgetSendButton before calling init, such as

WhWidgetSendButton = new WhWidgetSendButton()
.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure an inline HTML style takes precedence over a CSS style?

I'm trying to pass a value into an Angular Material Table in order to set the row color to black. However, it seems like my CSS stylesheet keeps overriding this setting which is meant to make the rows gray. I thought inline styling should take precede ...

The dynamic links are not supported by Webpack when used with Angular2

The Challenge I am faced with the task of creating a reusable Angular2 component that can display a custom image and be utilized by multiple other components. The goal is to have the flexibility to customize the image being displayed by passing a variable ...

What's with all the requests for loaders on every single route?

I'm in the process of setting up a new Remix Project and I'm experimenting with nested routing. However, no matter which route I navigate to, I keep encountering the same error: 'You made a GET request to "/", but did not provide a `loader` ...

The functionality of SystemJS core_1.provide is not valid

I am attempting to set up ASP.NET MVC 5 (not Core) with Angular 2.0.0 using JSPM, SystemJS, and TS Loader. It seems like there might be an issue with the TS loader in my opinion. Any recommendations? When I try to run the app, I encounter this error: Er ...

Importing TypeScript modules dynamically can be achieved without the need for Promises

I find myself in a scenario where the dynamic nature of these commands is crucial to prevent excessive loading of unnecessary code when executing specific command-line tasks. if (diagnostics) { require('./lib/cli-commands/run-diagnostics').run ...

Web Worker Integration for Standard Sensor API

Currently, I am developing a Progressive Web App using Ionic 4. While I can utilize the Generic Sensor API in the main thread, my goal is to incorporate it into a Web Worker for reading device motions (such as accelerometer, gyroscope, etc.) with an event ...

Issue with Datepicker validation in Angular 5 and Angular Material

I have implemented the most recent version of Angular and Angular Material. I am facing an issue with a datepicker where the validation requirements are not being met as expected. The documentation states that the required attribute should work by default, ...

incorrect choice of ngClass

Having sifted through numerous queries, I have come to this realization... The angular [ngClass] is behaving oddly when it comes to values like 10, 24, and 100. I can't seem to figure out the reason behind this behavior. Perhaps someone here might be ...

Could this type declaration in the Vue decorator constructor be accurate?

When using Vue decorator notation, I typically write it like this: @Prop({ type: Object || null, default: null }) However, I noticed in the Vue documentation that they use array notation: @Prop({ type: [ Object, null ], default: null }) Is there a specif ...

What is the process for importing the isDate function?

I'm facing an issue while trying to utilize the isDate() function in one of my methods. Visual Studio Code automatically inserted import { isDate } from '@angular/common/src/i18n/format_date' into my Component file. However, during compilati ...

What could be causing the discrepancy in alignment between a web application running on Mac and Windows using ReactNative?

We have a web application built with react native. The alignment of the columns in the list is causing issues when running the app on Windows versus Mac, as illustrated in the screenshots. Interestingly, this problem only occurs with this specific list tha ...

What is the best way to incorporate HTML entities into my Angular2 project?

I am currently using Angular-CLI to develop a straightforward style guide application. Unfortunately, I have encountered some issues when including preformatted HTML markup that contains HTML entities: Uncaught Error: Template parse errors: Unknown entit ...

After successfully installing @angular/localize, running npm update or npm install could result in a dependency error

I am looking to implement @angular/localize in my Angular application. Currently, I have a newly created NestJS backend integrated with an Angular frontend within an Nx monorepo. Upon attempting to install the package using npm install @angular/localize, ...

What is the process of destructuring an array containing objects?

Examining this JSON structure: { "Person": { "UID": 78, "Name": "Brampage", "Surname": "Foo" }, "Notes": [ { "UID": 78, "DateTime": "2017-03-15T15:43:04.4072317", "Person": { ...

What is the best method to create a gap between the header and table body in Angular Material version 13?

Is there a way to create space (margin) between the header and body in an Angular Material table? I initially attempted to use a solution found here, but it was unsuccessful. Check out the demo here: https://stackblitz.com/edit/angular-ivy-anphrw?file=sr ...

Is it feasible to utilize Progressive Web Apps on the Angular development server (ng serve)?

Recently, I've been diving into a new project where I'm exploring PWA for the first time and experimenting with push notifications. So far, I've managed to get PWA up and running by running the commands ng build --prod and http-server -p 80 ...

Each component does not have access to the same instance of a service

Objective: My goal is to develop a service with a subscribable array (BehaviorSubject) that updates client components whenever the data in the service changes. Initially, I plan to maintain a list of items on the server when new entries are added or modifi ...

The specified type does not meet the constraint as it lacks the required index signature

I'm currently working on refactoring a TypeScript project that utilizes React Hooks. While I have some knowledge of TypeScript, I am still more of a beginner than an expert. My main goal is to create reusable code for this project through the use of ...

Utilizing Rxjs' distinct operator to perform deep object comparisons with nested values

Within my observable, I am receiving a JSON object and using the distinct operator to avoid duplicates. The challenge is that I want to prevent duplicates only if the entire object remains the same as before. Since comparing based on a single attribute suc ...

When using Splide.js with React, the .sync() method may encounter issues when trying to synchronize multiple slides that have custom

I recently implemented a slider feature on my website similar to the one found on Amazon's product pages. When clicking on a product photo, I wanted a modal to appear with an enlarged version of the image in a slider format with thumbnails. To achieve ...