ReferenceError If Calling Function Of NPM Package In Vaadin 14
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)?
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(...)
}
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM