Vaadin 14.6.1 - Error: Can't resolve 'lumo-css-framework/all-classes.css'

Question

I am migrating a Vaadin Springboot/Gradle application from Vaadin 14.5.1 to 14.6.1. I copied the new file(s) from the themes folder from a freshly generated app from start.vaadin.com, in particular frontend/themes/my-app/styles.css

@import url('lumo-css-framework/all-classes.css');

When running the vaadinBuildFrontend task, I receive the following error (deep in other messages):

ERROR in ./themes/my-app/styles.css
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve 'lumo-css-framework/all-classes.css' in '/Users/<..>/my-app/frontend/themes/my-app

All build dependencies are seemingly the same as in the sample maven project. All generated files had been deleted prior to building the frontend.

After comparing the generated files, I found that the sample maven project contains "lumo-css-framework": "^3.0.11" in the generated package.json, while the gradle project does not contain this.

The environment:

• Spring 2.5.0
• Gradle 7.0.1
• Vaadin Gradle plugin 0.14.6.0
• macOS 11.2.3 and Centos 7

What am I missing in the setup?

Balmoral

Answer 1

Your project is missing the lumo-css-framework npm dependency. There are two ways you can add it:

1. npm install --save lumo-css-framework. This will store the dependency in package.json which contains a list of all npm dependencies needed in the project. It is academically wrong to say that package.json is auto generated as what Vaadin really does it populates package.json with whatever the Java side (mainly components) define as their npm dependencies. Any other dependency defined in package.json is left alone.

2. Annotate any Java class in the project with @NpmDependency(value="lumo-css-framework", version="^3.0.11"). This annotation will be used by Vaadin when figuring out what npm dependencies are needed for the project and then package.json will be updated based on the annotation.

Essequibo

Thanks for the quick response and advice. Running npm install --save lumo-css-frameworkworks, until gradle vaadinClean is executed. The next build then creates a new package.json. So this is not a sustainable approach. Adding @NpmPackage(value="lumo-css-framework", version="^3.0.11")works as you suggested and fixes the problem. I still think, though, that Vaadin should figure this out automatically, as the documentation explicitly states that all themes are based on Lumo. Thumbs up for your suggestion anyways!. Thanks. – Balmoral

@Balmoral - lumo-css-framework is not a requirement for using Vaadin. They are a set of utility CSS classes primarily for Fusion users. Projects generated with start.vaadin.com include some additional helpers and customization that aren't part of the framework which leads to some extra migration steps like this. – Schadenfreude