devsoap/ds-gradle-vaadin

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

Closed this issue · 5 comments

sascha-frinken commented

Desktop (please complete the following information):

  • OS: Linux
  • JDK version: 11
  • Gradle version: 5.6.2
  • Vaadin Plugin version: 1.3.beta5

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

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

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

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

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

johndevs commented

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")
  1. Import the badge javascript
@JsModule("@vaadin/vaadin-lumo-styles/badge.js")
  1. 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