I’m developing an web application with Spring Boot 2 / Vaadin 14 and have noticed that on restarting the application, the web
components appear to randomly not appear and the styling seems off.
This is an image of how it looks when it is working correctly.
I have tried deleting the node_modules/ dir and installing, rebuilding, clean etc to varying degrees of success, sometimes one field will show up, sometimes all of them.
I have no idea what is causing this so any help or suggestions would be really appreciated.
/VAADIN/** should be enough as far as I know. I asked because one common cause of the messages below is Spring Security blocking the request and redirecting it to /login.
The resource from “http://localhost:8080/login” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff) Loading failed for the <script> with source “http://localhost:8080/VAADIN/build/webcomponentsjs/webcomponents-loader.js”
Have you tried excluding ErrorMvcAutoConfiguration.class in the @SpringBootApplication annotation in your Application class? I had this issue too, and I believe that this stopped happening to me around the time I added that exclusion. Not 100% sure on this but worth a try.
@SpringBootApplication(exclude = ErrorMvcAutoConfiguration.class)
public class Application extends SpringBootServletInitializer {
...
}
Yes, same for production mode. Restarted 3 times and got 3 different variations of error.
It feels like some of the resources/styles are not loading. Comparing to a previous (Vaadin 13) working version, the styles for the H2 element, for example, are loaded from the Lumo theme. I can see the valo specific colours/spacing etc applied. In the new version, there are no Lumo styles at all for this element so styling defaults to the browser defaults.
Within the console, the only thing I almost consistently see that looks wrong is
Note: You’ll often get NotSupportedErrors thrown that seem like define() is failing, but instead it is likely a problem with Element.attachShadow().
It could be something wrong with frontend dependencies or webpack. If you can share a minimal example with source code it will be easier to figure out.
Thanks for taking the time to help out, I really do appreciate it.
I’ve done some more investigations today and got it down to whenever I define certain elements within a view, even if I never call that view, the problem occurs.
The elements that I know are problematic are DatePicker and ComboBox. I don’t even need to add them to the DOM, i.e.
@SpringComponent
@Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE)
@Route(value = "some-page", layout = WebsiteTemplate.class)
public class MainView extends Div {
public MainView() {
ComboxBox c = new ComboBox();
}
}
That is enough to cause the NotSupportedError: Operation is not supported vaadin-text-field.js:137 issue to occur in the Console output which is when everything else breaks.
Thanks for the code. I was able to reproduce de issue. It doesn’t seem to be related at all to Spring Security. I’ll try to figure out what is going on.
Sorry, I didn’t perform a mvn clean before rebuilding. On doing this it is working correctly again. Thanks for all your help looking into it.
Just so I understand the issue, changes caused an issue with the webpack / javascript dependencies which were causing the client side compilation to fail? Deleting these files caused Vaadin to re-build from fresh with all the correct requirements / dependencies?