在 webpack 中找不到 Vaadin 插件 javascript

Question

我发现了适用于 Vaadin 14+ 的非常有前途的 VStepper 插件，但不幸的是我无法让它与 Vaadin 20 一起运行。

当使用 VStepper 添加一些代码时，我总是得到一个 java.lang.IllegalStateException。其他人有同样的问题吗？

Tomcat 8 存在问题。该插件与 Springboot 一起使用。 v-stepper.js 已添加到 node_modules/@vaadin/flow-frontend/ 但 NpmTemplateParser 无法找到它。

堆栈跟踪：

java.lang.IllegalStateException: Couldn't find the definition of the element with tag 'v-stepper' in any template file declared using '@JsModule' annotations. Check the availability of the template files in your WAR file or provide alternative implementation of the method getTemplateContent() which should return an element representing the content of the template file
    at com.vaadin.flow.component.polymertemplate.NpmTemplateParser.getTemplateContent(NpmTemplateParser.java:155)
    at com.vaadin.flow.component.polymertemplate.TemplateDataAnalyzer.parseTemplate(TemplateDataAnalyzer.java:217)
    at com.vaadin.flow.component.polymertemplate.TemplateInitializer.<init>(TemplateInitializer.java:100)
    at com.vaadin.flow.component.polymertemplate.PolymerTemplate.<init>(PolymerTemplate.java:94)
    at com.vaadin.flow.component.polymertemplate.PolymerTemplate.<init>(PolymerTemplate.java:109)
    at com.mlottmann.vstepper.VStepper.<init>(VStepper.java:53)

Answer 1

编辑：

我在 Windows 上也有同样的 spring-boot 问题。使用原始 vaadin 启动器下载（vaadin 20、java 8、仅流）并添加插件我得到相同的错误消息。

调试显示同样的问题：

AbstractConfiguration.class
default String getFlowResourcesFolder() {
        return Paths.get(getBuildFolder(),
                FrontendUtils.DEFAULT_FLOW_RESOURCES_FOLDER).toString();
    }

在 Windows 上返回 target\flow-frontend，在 Linux 上返回 target/flow-frontend

自从BundleParser

if (name.contains(FLOW_NPM_PACKAGE_NAME) || name.contains(service
                    .getDeploymentConfiguration().getFlowResourcesFolder())) {
                alternativeFileName = alternativeFileName.replaceFirst("\\./",
                        "");
            }

使用String.contains() 检查是否应删除前导“./”在 Windows 中失败但在 Linux 上有效（原因名称为“../target/flow-frontend/v-stepper.js”）

---

我尝试对此进行调试，发现给定 webpack 生成的 stats.js 和 getFlowResourcesFolder() 返回的 buildfolder 中的文件夹名称不匹配 这是“目标\流动字体” stats.js 中的模块名称是“../target/flow-frontend/v-stepper.js”

,{"id":"../target/flow-frontend/v-stepper.js","name":"../target/flow-frontend/v-stepper.js","source":"import { ....

这发生在 flow-polymer-template-7.0.2.jar -> com.vaadin.flow.component.polymertemplate.BundleParser.getSourceFromObject(..) L:269

 if (name.contains(FLOW_NPM_PACKAGE_NAME) || name.contains(service
                    .getDeploymentConfiguration().getFlowResourcesFolder())) {
                alternativeFileName = alternativeFileName.replaceFirst("\\./",
                        "");
            }

Snip of Debug Variable content

环境为WIN10，Tomcat 8.5.x，Java 8，Vaadin 20.0.3，mvn build，vaadin NONE生产模式，无spring

Answer 2

不幸的是，该插件还不支持 Vaadin 20。我问了作者，但他现在没有时间研究。