Hello,
Vaadin components’ CSS doesn’t work in production mode. I’ve tried mvn clean and then mvn install, but it still hasn’t been fixed. What can I do?
vaadin-number-field (it’s not visible at all)
2024-05-14T14:50:33.649+03:00 ERROR 3876 — [http-nio-8020-exec-77] c.v.flow.component.internal.UIInternals : The component class com.vaadin.flow.component.grid.ColumnGroup includes ‘@vaadin/grid/src/vaadin-grid-column-group.js’ but this file was not included when creating the production bundle. The component will not work properly. Check that you have a reference to the component and that you are not using it only through reflection. If needed add a @Uses(ColumnGroup.class) where it is used.
2024-05-14T14:50:33.652+03:00 ERROR 3876 — [http-nio-8020-exec-77] c.v.flow.component.internal.UIInternals : The component class com.vaadin.flow.component.grid.Grid includes ‘@vaadin/grid/src/vaadin-grid.js’ but this file was not included when creating the production bundle. The component will not work properly. Check that you have a reference to the component and that you are not using it only through reflection. If needed add a @Uses(Grid.class) where it is used.
2024-05-14T14:50:33.652+03:00 ERROR 3876 — [http-nio-8020-exec-77] c.v.flow.component.internal.UIInternals : The component class com.vaadin.flow.component.tabs.Tab includes ‘@vaadin/tabs/src/vaadin-tab.js’ but this file was not included when creating the production bundle. The component will not work properly. Check that you have a reference to the component and that you are not using it only through reflection. If needed add a @Uses(Tab.class) where it is used.
2024-05-14T14:50:33.652+03:00 ERROR 3876 — [http-nio-8020-exec-77] c.v.flow.component.internal.UIInternals : The component class com.vaadin.flow.component.tabs.Tabs includes ‘@vaadin/tabs/src/vaadin-tabs.js’ but this file was not included when creating the production bundle. The component will not work properly. Check that you have a reference to the component and that you are not using it only through reflection. If needed add a @Uses(Tabs.class) where it is used.
Is the problem fixed if you add e.g. @Uses(ColumnGroup.class) to your main layout class?
But do I have to manually add all components like this? Isn’t there a shorter way?
How you have defined your view?
Normally if you define your view as Java code, the frontend build will find references to components without using @Uses annotation.
If adding @Uses to the main layout helps, then it indicates that the reason for the problem is that some parts of your views are defined in the way that isn’t found by the logic that optimizes the production bundle.
Flow starts from all classes annotated with @Route and all UI components indirectly referenced through those. This approach cannot detect UI logic that is only referenced indirectly through e.g. reflection or as Spring or CDI beans that implement some marker interface.
You need to make sure there are direct references somewhere to all the components that should be taken into account by the bundle optimizer. It’s enough to reference the “entry points” rather than separately referencing each leaf component.
Or, just disable the optimization?
<profiles>
<profile>
<!-- Production mode is activated using -Pproduction -->
<id>production</id>
...
<build>
<plugins>
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
...
<configuration>
<optimizeBundle>false</optimizeBundle>
</configuration>
</plugin>
</plugins>
</build>
</profile>
</profiles>
1 Like
Yes, this solved my issue. thnks
That’s just a workaround because it makes your user suffer from longer loading times. The appropriate solution would be to follow up on Leif’s and Tatu’s comment on how you have build your views… it might be that it’s just weird and the scanner can’t find your component and/or you doing something totally different that has nobody done before and might be interesting for a test case.
1 Like