search

devsoap / ds-gradle-vaadin

Gradle plugin for building Vaadin Flow 10/11/12/13/14/15 apps
https://devsoap.com/gradle-vaadin-flow-plugin
Other
36 stars 13 forks source link

'@vaadin/vaadin-lumo-styles/badge' could be found. Module ignored #302

Closed sascha-frinken closed 4 years ago

sascha-frinken commented 4 years ago

Desktop (please complete the following information):

Describe the bug Having follwoing JsModule annotation @JsModule("@vaadin/vaadin-lumo-styles/badge") produces following warning: No Javascript module with the name '@vaadin/vaadin-lumo-styles/badge' could be found. Module ignored.
Using latest Vaadin Business Starter App…

johndevs commented 4 years ago

This error means you are missing the @vaadin/vaadin-lumo-styles NPM dependency. You should be able to add it manually via 

vaadinClientDependencies {
       yarn '@vaadin/vaadin-lumo-styles'
}

Since the Vaadin Business Starter is a commercial Vaadin product and not open source I can't really help you further. You might want to turn to the Vaadin guys for help.

johndevs commented 4 years ago

I think you have a typo, the .js extension is missing.

So it should be @JsModule("@vaadin/vaadin-lumo-styles/badge.js")

sascha-frinken commented 4 years ago

The orginal vaadin source has no .js extension.
I already tried with @JsModule("@vaadin/vaadin-lumo-styles/badge.js") that makes the warning disappear but the style is not applied…

Looks like some magic.

johndevs commented 4 years ago

Looks like the badge styles are problematic. Found at least these tickets about them:

johndevs commented 4 years ago

Tested this with the latest master branch and was successful in using the badge style by using the following approach:

  1. Include the badge style when importing your theme: 
    @CssImport(value = "./theme.css", include = "lumo-badge")
  2. Import the badge javascript 
    @JsModule("@vaadin/vaadin-lumo-styles/badge.js")
  3. Set the theme-attribute of the element. For example like this: 
    Html html = new Html("<span>Badge</span>");
html.getElement().setAttribute("theme", "badge");

    This will yield the following badge:

Most likely this got solved when adding the missing attribute support for @CssImport in #321