Search code examples
javascripttypescriptxml-rpc

Uncaught (in promise) ReferenceError converting addEventListener to Typescript


I have a simple webpage developed that I use to send text input to an XML RPC server. I got the code working in Javascript but now I'm trying to convert it all to Typescript and use promises with async/await. This is as a learning experiment. It's proving to be a little difficult at my current experience level.

Previous working Javascript code:

import "./mimic.js";
function makeComment() {
    const method = "MakeComm";
    let request = new XmlRpcRequest("http://localhost:1337/RPC2", method);
    request.addParam(document.getElementById("n1")).value;
    request.addParam(document.getElementById("n2")).value;
    let response = request.send();
    console.log(response);
}

As I said above, this function communicates correctly with the XML RPC server. Here is my converted Typescript code:

import "./mimic.js";
const updateCommentBtn: HTMLButtonElement = document.getElementById(
    'makeComment',) as HTMLButtonElement;

updateCommentBtn.addEventListener('click', async () => {
    const method = "MakeComm";
    let request:any = new XmlRpcRequest("http://localhost:1337/RPC2", method);
    request.addParam(<HTMLInputElement>document.getElementById("n1")).value;
    request.addParam(<HTMLInputElement>document.getElementById("n2")).value;
    let response = await request.send();
    console.log(response);
});

I'm getting an error:

Uncaught (in promise) ReferenceError: XmlRpcRequest is not defined
    at Object.<anonymous> (fileChange.ts:36)
    at new Promise (<anonymous>)
    at HTMLButtonElement.<anonymous> (fileChange.ts:34)

The XmlRpcRequest call is a function contained in ./mimic.js.

My HTML for the Typescript version:

<p>Make Comment:</p>
<input type="text" id="n1"/>
<input type="text" id="n2"/>
<button id="makeComment">Update Comment</button>

EDIT: mimic.js defines XmlRpcRequest as follows:

function XmlRpcRequest(url, method) {
    this.serviceUrl = url;
    this.methodName = method;
    this.crossDomain = false;
    this.withCredentials = false;   
    this.params = [];
    this.headers = {};
};

Solution

  • Thank you for adding your code

    You should export the function like this in mimic.js

    export const XmlRpcRequest = (url, method) => {
        this.serviceUrl = url;
        this.methodName = method;
        this.crossDomain = false;
        this.withCredentials = false;   
        this.params = [];
        this.headers = {};
    };
    

    and import it

    import { XmlRpcRequest } from "./mimic";
    

    If your typescript linter is giving you gyp you could add definitions for the arguments like so:

      export const XmlRpcRequest = (url: string, method: string) => {
            this.serviceUrl = url;
            this.methodName = method;
            this.crossDomain = false;
            this.withCredentials = false;   
            this.params = [];
            this.headers = {};
      };