在 webpack 中找不到 Vaadin 插件 javascript

如何解决在 webpack 中找不到 Vaadin 插件 javascript

我发现非常有前途的 VStepper 插件适用于 Vaadin 14+，但不幸的是我没有让它与 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)

解决方法

不幸的是，附加组件尚不支持 Vaadin 20。我问过作者，但他现在没时间研究。

编辑：

我在 Windows 上的 spring-boot 也有同样的问题。使用原始 vaadin starter 下载（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