Upgrading to 14.0.0.alpha3 breaks project

Tori · May 7, 2019, 7:39pm

Hello,

In preparation for Vaadin 14, I have a production branch meant for updating my 13.0.6 project to the alpha versions of 14. Up until alpha2, things seemed okay for the most part - minus a few visual issues - but it looks like alpha3 has caused a lot of problems.

Images attached for reference - it appears that the components themselves are just not wanting to load. Checking the source, the components are there, but they are just not showing up at all.

I’ve tried this with both Firefox 66.0.4 and Chrome 74.0.3729.131

Code Snippet:

H3 heading_title = new H3("Welcome");

VerticalLayout login_box = new VerticalLayout();
Image cubeImg = new Image("frontend/img/user.png", "Logo");
TextField username = new TextField("Email");
PasswordField password = new PasswordField("Password", "********");
Button submit = new Button("Sign In");
this.setHeightFull();

add(heading_title, login_box);
heading_title.getStyle().set("font-size", "var(--lumo-font-size-xxl)");
heading_title.getStyle().set("margin", "70px 0px 10px 0px");

login_box.add(cubeImg, username, password, submit);
cubeImg.getStyle().set("display", "table-cell");
cubeImg.getStyle().set("margin", "auto");

username.getStyle().set("padding-top", "0px");
username.setWidth("100%");
username.setAutofocus(true);

password.setRevealButtonVisible(false);
password.setWidth("100%");
password.getStyle().set("padding-top", "0px");
password.getStyle().set("margin-top", "8px");

submit.addClickShortcut(Key.ENTER).allowBrowserDefault();
submit.setWidth("100%");

setAlignItems(Alignment.CENTER);

mgrankvi · May 8, 2019, 5:49am

Hi.

Does the server say that it is running in Bower mode?
Vaadin is running in BOWER mode. should be in the server logs.

If not then try adding to the maven pom

            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>properties-maven-plugin</artifactId>
                <version>1.0.0</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>set-system-properties</goal>
                        </goals>
                        <configuration>
                            <properties>
                                <property>
                                    <name>vaadin.bowerMode</name>
                                    <value>true</value>
                                </property>
                            </properties>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

This is because 14.0.0.alpha3 doesn’t yet have fully npm compatible components.

Bogdan29 · May 8, 2019, 12:04pm

Hi Tori, could you please give us more details about your project’s folders structure. A small project to reproduce this would be great if you could send us.

Thank you so much!

Tori · May 8, 2019, 4:06pm

Mikael - I thought it was working, but it turned out I was still on alpha2 If I add your snippet to the pom, I still get issues like shown before

Bogdan, to replicate the issue, I downloaded the project base starter (https://vaadin.com/start/latest/java-ui) and then updated the Vaadin version to 14.0.0.alpha3

Tori · May 8, 2019, 4:18pm

I’m attaching a .zip of the project base with the update to alpha3 and includes the vaadin.bowerMode fix Mikael suggested
17654479.zip (11.9 KB)

mgrankvi · May 9, 2019, 7:16am

Hi.

You have the bowerMode flag inside the productionMode profile.
It should be in the build above the profile.
The project runs in npm mode out of the zip and works fine after moving the bowerMode flag right after the jetty plugin

Mikael

Tori · May 9, 2019, 12:59pm

If I add the snippet into the build section, right after the jetty plugin, I get this error:

Plugin execution not covered by lifecycle configuration: org.codehaus.mojo:properties-maven-plugin:1.0.0:set-system-properties (execution: default, phase: initialize)

If I add a <pluginManagement> tag around the build, shown below, the error goes away, but the issues persist when running the project on my end.

For more info, I’m running this on Wildfly 15.0.1

<build>
    <pluginManagement>
        <plugins>
            <plugin>
                <groupId>org.eclipse.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>${jetty.version}</version>
            </plugin>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>properties-maven-plugin</artifactId>
                <version>1.0.0</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>set-system-properties</goal>
                        </goals>
                        <configuration>
                            <properties>
                                <property>
                                    <name>vaadin.bowerMode</name>
                                    <value>true</value>
                                </property>
                            </properties>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </pluginManagement>
</build>

mgrankvi · May 10, 2019, 6:41am

Is it as a deployed war or through the wildfly maven plugin?

mgrankvi · May 10, 2019, 7:45am

I guess you are also running it in eclipse due to the
Plugin execution not covered by lifecycle configuration as that’s m2e exception.

If you are running the project as a deployed war then you should set the vaadin.bowerMode=true flag to
wildfly system property as the plugin only sets the flag when running from maven so mvn jetty:run

Mikael

Tori · May 10, 2019, 2:23pm

Yes, that seems to have fixed it - going into Configuration > System Properties and adding that flag works. Thank you for the help!

May I ask a follow-up question? I’ve noticed that after the upgrade, some of the formatting on Grids and other components look off and then they’ll fix themselves after refreshing the page. Is this just a related issue to the npm compatible components you mentioned earlier in the thread? I’m attaching a few examples for reference.

mgrankvi · May 13, 2019, 8:40am

This sounds like a caching problem where the initial load doesn’t update the previously cached themes and
there is a missmatch somewhere.

Does this faulty formatting happen on each server restart or is it only for the first migration startup?

If it happens on each startup could you try having disable cache on in the inspectors Network tab and have inspector open when loading the page. Then all files should be gotten as is from the server.

Mikael