Vaadin 12 Layout issue

Hi,

I’m running Vaadin 12 in an OSGi environment. For this to work, I wrapped all webjars in an OSGi jar and added a custom OsgiVaadinContributer, which seems to work.

The remaining problem is that not all layout is loaded: fonts are loaded correctly (fonts also change when switching between Lumo and Material), but other layout is not shown (see screenshot below). In the developer console, I see no 404-errors showing up.

Does anyone recognize what’s possibly going wrong here?

Thanks.

Hi Bram.

What type of project setup do you have ? What dependencies (flow / vaadin-core) and versions you are declaring ?

Do you see whether the themed or the non-themed versions of the web components are being loaded, in the sources/networks tab in Chrome ? The theme name should be visible on the web component resources path.

Hi Pekka,

I’m running the application in Apache Felix 6.0.1, with the latest Vaadin jars. For this small demo: Flow Data v1.2.2, Flow Html Components v1.2.2, Flow Lumo/Material Theme v1.2.2, Flow OSGi v1.2.2, Flow Server v1.2.2, Flow Client v1.2.2, Component Button v1.2.0 and Component Ordered Layout v1.2.0.

I see the following in the sources tab, so I assume the non-themed versions are loaded, which is not correct?

Any clue on why the non-themed version is loaded? Am I missing a bundle?

Thanks.

We have noticed the same issue here: https://github.com/vaadin/base-starter-flow-osgi master branch works, but the v12 branch which uses the versions declared in 12.0.1 from yesterday is still broken.

We are investigating this and I’ll update here once we’ve pinpointed the issue.

Thanks a lot, Pekka :).

The issue to follow is https://github.com/vaadin/flow/issues/4847 and for now you can use the workaround @Theme(Lumo.class) in your root layout or navigation target. Note though that you need Vaadin 12.0.1.

Hi Pekka,

My test page is as follows:

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.theme.Theme;
import com.vaadin.flow.theme.lumo.Lumo;

@Route("")
@Theme(Lumo.class)
public class MainView extends VerticalLayout {

    public MainView() {
        Button button = new Button("Click me",
                event -> System.out.println("Clicked."));
        add(button);
    }
}

I use following versions, which are (correct me if I’m wrong) the 12.0.1 versions:

  • Flow Data v1.2.3
  • Flow Html Components v1.2.3
  • Flow Lumo/Material Theme v1.2.3
  • Flow OSGi v1.2.3
  • Flow Server v1.2.3
  • Flow Client v1.2.3
  • Component Button v1.2.0
  • Component Ordered Layout v1.2.0.

However, the problem still exists as before. Am I missing something?

Problem still exists in all latest versions. Does anyone have any clue?

In the logs I see following lines:

Can't find resource 'frontend://bower_components/vaadin-button/src/vaadin-button.html' to parse for imports via the servlet context
Can't find resource 'frontend://bower_components/vaadin-ordered-layout/src/vaadin-vertical-layout.html' to parse for imports via the servlet context

I think it is related to another bug that we’ve fixed but not yet released https://github.com/vaadin/flow-component-base/commit/0a100c3dd4158e123f11d18372394408dfa34053

If I’ve understood correctly, we need to release all the effected components again to get the fix in, and currently due to holidays we have some trouble doing this. We will try to make it happen during next week at latest. Sorry for the inconvenience.

In the meantime, you could try to use the latest snapshot versions of the components, but that is rather ugly… https://oss.sonatype.org/content/repositories/vaadin-snapshots/com/vaadin/

Is the fix released? In which version will it be fixed?

I’m not sure which one you’re referring to, but the latest version 12.0.4 works fine at least when you use the @Theme(Lumo.class) on the root layout level. There are no errors about not finding the component resources.

The using Lumo as the default theme (without specifying it with the theme annotation) has been fixed too but not yet released for Flow nor platform. We’re quite busy at the moment with other things, so I cannot say if it will be released next week or the week after that. (12.0.5 or 12.0.6)

I think Martin is referring to your other message:

Pekka Hyvönen:
I think it is related to another bug that we’ve fixed but not yet released https://github.com/vaadin/flow-component-base/commit/0a100c3dd4158e123f11d18372394408dfa34053

If I’ve understood correctly, we need to release all the effected components again to get the fix in, and currently due to holidays we have some trouble doing this. We will try to make it happen during next week at latest. Sorry for the inconvenience.

In the meantime, you could try to use the latest snapshot versions of the components, but that is rather ugly… https://oss.sonatype.org/content/repositories/vaadin-snapshots/com/vaadin/

Even with setting the annotation on my layout, I still have the described issue:

Bram Vanseveren:
Problem still exists in all latest versions. Does anyone have any clue?

In the logs I see following lines:

Can't find resource 'frontend://bower_components/vaadin-button/src/vaadin-button.html' to parse for imports via the servlet context
Can't find resource 'frontend://bower_components/vaadin-ordered-layout/src/vaadin-vertical-layout.html' to parse for imports via the servlet context

Yes, and that issue should not be present if you use the latest 12.0.4.

At least I was not able to reproduce it by downloading the project base for OSGi from https://vaadin.com/start

I still have the same issue using Vaadin 13. I think the repackaging of the WebJars is not done correctly on my side. All resources can be found by the browser (as I don’t have 404’s in my developer console in Chrome), but in e.g. VaadinServletService the getResourceInServletContextOrWebJarAsStream-method cannot find any of the resources.

I repackaged all webjars in an OSGi-compatible jar and implemented the OsgiVaadinContributor. I’m not using Maven in any of my projects, so I could not use the repackaging instructions that can be found in the tutorials.

Any tips?

I managed to get it working: All webjar resources have to be in the same bundle as the VaadinServletRegistration. If the resources are in /frontend/bower_components in the root of the bundle, all works well. It does NOT work when placing the resources somewhere else in the jar (or even in another jar) and using an OsgiVaadinResourceProvider (which in my opinion is a bug and should work).

I’ve found the root cause why OsgiVaadinResourceProvider was not behaving as it should. I think there is a bug in the Vaadin OSGi bundle:

Concerning VaadinResourceTrackerComponent: It firstly registers all resources in a map (resourceToRegistration). After the httpService binds, the activate-method is called and registers all resources that were in the map into the httpService. If resources are added after the activate-method was executed (which is very possible in OSGi), they will never be registered in the httpService. Fix is to register the resource in the map (as is done now) and if httpService is already present, also register them directly in the httpService.