Vaadin components no longer render

Flow
1

I currently have about 18 different views in the application I’m developing. I decided to update from Vaadin 14.1.18 to 14.1.27 when I added the newest view. After the update, I noticed the login page wasn’t rendering correctly. I tried a mvn clean install which didn’t help. I reverted to 14.1.18 which also didn’t help.

I’ve attached a couple of the page views to illustrate what I mean by not rendering correctly. It looks like that only thing rendering on the page is the text that’s supposed to be the label for some of the components. The first screenshot is the login page. Sign In, Forgot Password, and New User are the labels on the 3 buttons. The labels for the username and password TextFields don’t get rendered. And, of course, nothing else is being rendered either.

About 50 min after I started the app, I got the following message in the terminal which is something I’ve never seen before. Other than that 1 message, there’s no indication that anything has gone wrong. No other warnings or errors.

2020-05-02 22:01:55.725  WARN 760 --- [alina-utility-2]
 com.vaadin.flow.server.VaadinSession     : A VaadinSession instance not associated to any service is getting unbound. Session destroy events will not be fired and UIs in the session will not get detached. This might happen if a session is deserialized but never used before it expires.

Please tell me someone at Vaadin understands what’s happening.

18247277.png
18247280.png

2

Hi,

switching between versions sometimes gives headaches to us, too.

We remove:

  • directory “target”
  • directory “node_modules”
  • file: “package-lock.json”

and afterwards execute “mvn clean install”

After that, 100% our problems are gone.

Regards

3

I wish that worked for me, but it didn’t. This is all that Vaadin is generating…

<div class="login-view">
<vaadin-vertical-layout class="login-wrapper" style="width: 360px;" theme="padding spacing">
<div class="header" style="width: 360px;"></div>
<vaadin-vertical-layout class="login-form" style="width: 360px;" theme="padding spacing">
<vaadin-text-field class="username"></vaadin-text-field>
<vaadin-password-field class="password"></vaadin-password-field>
<vaadin-button class="login" theme="primary">Sign In</vaadin-button>
<vaadin-button class="forgot-password" theme="tertiary">Forgot Password</vaadin-button>
<vaadin-button class="new-user" theme="tertiary">New User</vaadin-button>
</vaadin-vertical-layout>
</vaadin-vertical-layout>
</div>
4

Try to add npm install:


rm node_modules
rm package-lock.json
rm -rf target
nvm clean install 
npm install
5

btw - i’ve seen the session error as well, but my UIs are looking fine, so not sure it’s related.

6

Thanks for the suggestion, but that didn’t work either. I had actually already tried an update of npm.

7

hmmm… clear browser cache?

Does happen both in development and production modes?

8

I haven’t tried a production build. Someone has suggested it’s due to the FullCalendar add-on, but that had been working fine for at least a week in 14.1.18. And I’ve reverted to 14.1.18. It’s definitely not the browser cache.

9

It is, in fact, due to FullCalendar [https://github.com/stefanuebe/vaadin_fullcalendar/issues/52]
(hhttps://github.com/stefanuebe/vaadin_fullcalendar/issues/52ttp://). The workaround, as pointed out by Jean-Christophe Gueriaud, is add @NpmPackage(value = “moment”, version = “2.24.0”) on the route where the calendar is used.