Ad

ReferenceError If Calling Function Of NPM Package In Vaadin 14

- 1 answer

I want to import a module for one of my .js files and call my .js file with Vaadin 14. Unfortunately I struggle with importing it and a ReferenceError is thrown in the browser.

My view:

@Route(value = "jstest", layout = MainView.class)
@PageTitle("jstest")
@JsModule("./sipcall.js")
@NpmPackage(value = "sip.js", version = "0.15.10")
public class SipJsTest extends Div {
    private Button b;
    public SipJsTest() {
        b = new Button();
        b.setText("Execute SIP.js");
        b.addClickListener(listener -> {
            Page page = UI.getCurrent().getPage();
            page.executeJs("executesipcall()");
        });
        add(b);
    }
}

sipcall.js (the module is named this way) is located in frontend/sipcall.js/. If I do a simple console output the function is called correctly. The error appears if I try to use the imported module.

sipcall.js:

import "sip.js";

window.executesipcall = function() {
    var ua = new SIP.UA(...) // from the imported module, throws exception
}

node_modules/sip.js/ contains the module that I imported with @NpmPackage. The module is also listed in package.json with "sip.js": "0.15.10".

Webconsole error:

client-4FB121A4CC0177A1068809F06428A755.cache.js:57 Uncaught ReferenceError: SIP is not defined at window.executesipcall (vaadin-bundle-6b322b28264dafdccb46.cache.js:4505) at Object.eval (eval at St (client-4FB121A4CC0177A1068809F06428A755.cache.js:991), :1:1)

Any ideas why Vaadin does not recognize the import? Is it because it is not imported in global scope (mentioned here)?

Ad

Answer

I found a solution. I had to use NodeJs' require() to import the module instead of import. It works but I am not sure why.

sipcall.js:

window.executesipcall = function() {
    var sip = require("sip.js");
    var ua = new sip.UA(...)
}

What is require()?

Ad
source: stackoverflow.com
Ad