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

Question

I'm developing a demo project with Vaadin 14.2 along with facelets and wildfly 18. Using pnpm enabled in the pom.xml .我正在使用 Vaadin 14.2 以及 facelets 和 wildfly 18 开发一个演示项目。使用pnpm在pom.xml中启用。

I'm tried to embed one of my Vaadin view in the facelets page as mentioned in the doc on Vaadin website as below.我试图将我的 Vaadin 视图之一嵌入到 facelets 页面中，如下面的 Vaadin 网站上的文档中所述。

Why embedded component don't show up on the facelets page?为什么嵌入式组件不显示在 facelets 页面上？

I tried both debug and production mode.我尝试了调试和生产模式。

Error on debug mode is as below while navigating to the JSF page:导航到 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

Error on production mode is as below while navigating to the facelets page:导航到 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 page 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 embedded component 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 production profile 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

Regarding the production mode: please make sure that the META-INF/VAADIN/config/stats.json resource is somewhere in your EAR/WAR/JAR.关于生产模式：请确保META-INF/VAADIN/config/stats.json资源位于您的 EAR/WAR/JAR 中。 It should have been produced by the Vaadin Maven Plugin, the build-frontend goal - please verify from Maven stdout that the goal has been run.它应该由 Vaadin Maven 插件生成， build-frontend目标 - 请从 Maven 标准输出验证目标已运行。 There is also a bit of information here: https://vaadin.com/forum/thread/17763152/vaadin-14-npm-mode-production-profile ;这里还有一点信息： https://vaadin.com/forum/thread/17763152/vaadin-14-npm-mode-production-profile ； also Vaadin might have trouble discovering classpath files in skinny EARs. Vaadin 也可能无法在瘦 EAR 中发现类路径文件。

It could also be that there is an issue with this specific configuration.也可能是此特定配置存在问题。 In such case just let us know, either on forums or at https://github.com/vaadin/flow/issues在这种情况下，请在论坛或https://github.com/vaadin/flow/issues上告诉我们

Regarding the development mode: the target\frontend folder should no longer be needed with Vaadin 14.2.关于开发模式：Vaadin 14.2 不再需要target\frontend文件夹。 It could be that you have migrated from Vaadin 14.1 but the javascript files haven't been updated.可能是您已从 Vaadin 14.1 迁移，但 javascript 文件尚未更新。 Please try to clean the Vaadin files: namely, delete node_modules , pnpm-lock.yaml , package.json , pnpmfile.js , webpack.generated.js and try the development mode once more. 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.

Feedback on your reply:对您的回复的反馈：

I have attached a screenshot with more detail of project structuers and also web.xml我附上了一个屏幕截图，其中包含项目结构的更多细节以及web.xml

From stdout I can see that the build-frontend goal has been executed.从标准输出我可以看到build-frontend目标已经执行。

As you can see on the screenshot below, stats.json is not produced by vaadin maven plugin in none of META_INF directory.正如您在下面的屏幕截图中看到的， 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