为什么嵌入式 vaadin 14 组件不出现在 XHTML 页面上？

Question

我正在使用 Vaadin 14.2 以及 facelets 和 wildfly 18 开发一个演示项目。使用pnpm在pom.xml中启用。

我试图将我的 Vaadin 视图之一嵌入到 facelets 页面中，如下面的 Vaadin 网站上的文档中所述。

为什么嵌入式组件不显示在 facelets 页面上？

我尝试了调试和生产模式。

导航到 JSF 页面时，调试模式下的错误如下：

ERROR [dev-webpack] (webpack) ERROR in ../target/frontend/generated-flow-imports.js
ERROR [dev-webpack] (webpack) Module not found: Error: Can't resolve '@vaadin/flow-frontend/' in 'C:\Development\workspace\soft\fering-web\target\frontend'
ERROR [dev-webpack] (webpack)  @ ../target/frontend/generated-flow-imports.js 82:0-32

导航到 facelets 页面时，生产模式下的错误如下：

14:53:33,277 ERROR [com.vaadin.flow.server.frontend.FrontendUtils] (default task-4) Cannot get the 'stats.json' from the classpath 'META-INF/VAADIN/config/stats.json'
14:53:33,282 ERROR [com.vaadin.flow.server.DefaultErrorHandler] (default task-4) : com.vaadin.flow.server.BootstrapException: Unable to read webpack stats file.
Caused by: java.io.IOException: The stats file from webpack (stats.json) was not found.
The application is running in production mode.Verify that build-frontend task has executed successfully and that stats.json is on the classpath.Or switch application to development mode.
    at com.vaadin.flow.server.BootstrapHandler$BootstrapPageBuilder.appendNpmBundle(BootstrapHandler.java:923)
    at com.vaadin.flow.server.BootstrapHandler$BootstrapPageBuilder.setupFrameworkLibraries(BootstrapHandler.java:889)
    ... 59 more

14:53:33,287 ERROR [io.undertow.request] (default task-4) UT005023: Exception handling request to /fering/vaadin/web-component/web-component-bootstrap.js: javax.servlet.ServletException: com.vaadin.flow.server.ServiceException: com.vaadin.flow.server.BootstrapException: Unable to read webpack stats file.
    at com.vaadin.flow.server.VaadinServlet.service(VaadinServlet.java:249)
    at com.vaadin.cdi.CdiVaadinServlet.service(CdiVaadinServlet.java:67)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:590)
    at io.undertow.servlet.handlers.ServletHandler.handleRequest(ServletHandler.java:74)
    at io.undertow.servlet.handlers.FilterHandler$FilterChainImpl.doFilter(FilterHandler.java:129)
    at io.opentracing.contrib.jaxrs2.server.SpanFinishingFilter.doFilter(SpanFinishingFilter.java:52)

Facelets xhtml 页面

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<f:view contentType="text/html;charset=utf-8"/>
<ui:include src="/include/queryHeader.xhtml"/>
<h:head>
    <h:outputScript name="jquery/jquery.js" library="primefaces"/>
    <script type="text/javascript" src="vaadin/VAADIN/build/webcomponentsjs/webcomponents-loader.js"  ></script>
    <script type="module" src="vaadin/web-component/first-view.js"></script>
    <style type="text/css">
        first-view {
            width: 100%;
        }
        body {
            margin: 8px;
            width: auto;
            height: auto;
        }
    </style>
</h:head>

<h:body>
    <hr/>
    <first-view></first-view>

</h:body>

</html>

Vaadin 嵌入式组件

@Tag("first-view")
@PreserveOnRefresh
public class FirstViewExporter  extends WebComponentExporter<FirstView> {
    public FirstViewExporter() {
        super("first-view");
    }


    @Override
    protected void configureInstance(WebComponent<FirstView> webComponent, FirstView firstView) {

    }
}

pom.xml生产简介

<profiles>
        <profile>
            <id>production</id>
            <properties>
                <vaadin.productionMode>true</vaadin.productionMode>
            </properties>
            <dependencies>
                <dependency>
                    <groupId>com.vaadin</groupId>
                    <artifactId>flow-server-production-mode</artifactId>
                </dependency>
            </dependencies>
            <build>
                <plugins>
                    <plugin>
                        <groupId>com.vaadin</groupId>
                        <artifactId>vaadin-maven-plugin</artifactId>
                        <version>${vaadin.version}</version>
                        <configuration>
                            <pnpmEnable>true</pnpmEnable>
                        </configuration>
                        <executions>
                            <execution>
                                <goals>
                                    <goal>prepare-frontend</goal>
                                    <goal>build-frontend</goal>
                                </goals>
                            </execution>
                        </executions>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>

Answer 1

关于生产模式：请确保META-INF/VAADIN/config/stats.json资源位于您的 EAR/WAR/JAR 中。 它应该由 Vaadin Maven 插件生成， build-frontend目标 - 请从 Maven 标准输出验证目标已运行。 这里还有一点信息： https://vaadin.com/forum/thread/17763152/vaadin-14-npm-mode-production-profile ； Vaadin 也可能无法在瘦 EAR 中发现类路径文件。

也可能是此特定配置存在问题。 在这种情况下，请在论坛或https://github.com/vaadin/flow/issues上告诉我们

关于开发模式：Vaadin 14.2 不再需要target\frontend文件夹。 可能是您已从 Vaadin 14.1 迁移，但 javascript 文件尚未更新。 Please try to clean the Vaadin files: namely, delete node_modules , pnpm pnpm-lock.yaml , package.json , pnpmfile.js , webpack.generated.js and try the development mode once more.

对您的回复的反馈：

我附上了一个屏幕截图，其中包含项目结构的更多细节以及web.xml

从标准输出我可以看到build-frontend目标已经执行。

正如您在下面的屏幕截图中看到的， stats.json不是由vaadin maven plugin在META_INF目录中生成的。

为什么嵌入式 vaadin 14 组件不出现在 XHTML 页面上？

问题描述

1 个解决方案

解决方案1
1 2020-06-24 07:37:30

为什么嵌入式 vaadin 14 组件不出现在 XHTML 页面上？

问题描述

1 个解决方案

解决方案1 1 2020-06-24 07:37:30

解决方案1
1 2020-06-24 07:37:30