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?

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.