Why embedded vaadin 14 components don't show up on the XHTML page?
Question
I'm developing a demo project with Vaadin 14.2 along with facelets and wildfly 18. Using pnpm enabled in the 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.
Why embedded component don't show up on the facelets page?
I tried both debug and production mode.
Error on debug mode is as below while navigating to the JSF page:
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:
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
<?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
@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
<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>
1 answers
solution1
1 2020-06-24 07:37:30
Regarding the production mode: please make sure that the META-INF/VAADIN/config/stats.json resource is somewhere in your 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. There is also a bit of information here: https://vaadin.com/forum/thread/17763152/vaadin-14-npm-mode-production-profile ; also Vaadin might have trouble discovering classpath files in skinny EARs.
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
Regarding the development mode: the target\frontend folder should no longer be needed with Vaadin 14.2. It could be that you have migrated from Vaadin 14.1 but the javascript files haven't been updated. 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.
Feedback on your reply:
I have attached a screenshot with more detail of project structuers and also web.xml
From stdout I can see that the build-frontend goal has been executed.
As you can see on the screenshot below, stats.json is not produced by vaadin maven plugin in none of META_INF directory.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.