Javascript 调用Vaadin 14中NPM包的函数时发生ReferenceError

我想为我的一个.js文件导入一个模块，并使用Vaadin 14调用我的.js文件。不幸的是，我很难导入它，浏览器中抛出了一个引用错误

我的看法是：

@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（模块以这种方式命名）位于前端/sipcall.js/。如果我做了一个简单的控制台输出，那么函数的调用是正确的。如果我尝试使用导入的模块，则会出现错误

sipcall.js：

import "sip.js";

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

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

节点\u modules/sip.js/包含我使用@NpmPackage导入的模块。该模块还与

的“sip.js”一起列在package.json中：“0.15.10”

Webconsole错误：

client-4FB121A4CC0177A1068809F06428A755.cache.js:57未捕获 ReferenceError:未定义SIP 在window.executesipcall（vaadin-bundle-6b322b28264dafdccb46.cache.js:4505） 在Object.eval（在St（客户机-4FB121A4CC0177A1068809F06428A755.cache.js:991）进行评估）， ：1:1）

---

知道瓦丁为什么不承认进口吗？是不是因为它没有导入全局范围（提到）？

我找到了一个解决方案。我不得不使用NodeJs的

require（）

来导入模块，而不是

import

。这是可行的，但我不知道为什么

sipcall.js：

import "sip.js";

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

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

---

我找到了解决办法。我不得不使用NodeJs的

require（）

来导入模块，而不是

import

。这是可行的，但我不知道为什么

sipcall.js：

import "sip.js";

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

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

---

我对我所说的不太自信，但你确定npmPackage路径是正确的吗？实际的sip.js文件应该在node_模块中的某个子文件夹中，不是吗？例如，Vaadins Button类具有注释

@NpmPackage（value=“@vaadin/vaadin Button”，version=“2.2.2”）

-->它们甚至没有指定单个.js文件是的，模块位于node_modules/sip.js/Yes中的子文件夹中，文件夹名称包含.js结尾。我认为npm包是这样调用的：您的sip.js和sipcall.js是否在同一个文件夹中，因为您似乎有“import”sip.js“；”，这可能是失败的部分，因此“var ua=new SIP.ua（…）”失败，因为它没有导入。@TatuLund我通过使用require（）导入模块找到了一个解决方案。我对我所说的不太自信，但你确定npmPackage路径正确吗？实际的sip.js文件应该在node_模块中的某个子文件夹中，不是吗？例如，Vaadins Button类具有注释

@NpmPackage（value=“@vaadin/vaadin Button”，version=“2.2.2”）

-->它们甚至没有指定单个.js文件是的，模块位于node_modules/sip.js/Yes中的子文件夹中，文件夹名称包含.js结尾。我认为npm包是这样调用的：您的sip.js和sipcall.js是否在同一个文件夹中，因为您似乎有“import”sip.js“；”，这可能是失败的部分，因此“var ua=new SIP.ua（…）”由于未导入而失败。@TatuLund我通过使用require（）导入模块找到了解决方案