Upgrade from 23 to 24, pb 'fontsource/poppins'

Hi everyone. I’m trying to upgrade my vaadin to 24.0.4. When I launch my application, I have this error in my console “java.lang.IllegalStateException: Asset ‘/@fontsource/poppins’ is not found in project frontend directory” . What I Have to do ? Thank you

I understand more thing. In my styles.css I ahve tose line for change my font :

@import url(‘@fontsource/poppins’);

I thionk I have to add font file womewhere in my projetc ?!

that does not look like a valid url to me – I doubt it could ever have worked, unless you’re using some kind of css-preprocessor

Like @useful-whale said, you must have a CSS preprocessor that resolves modules for CSS imports. Perhaps when you upgraded to Vaadin 24, you lost some config in vite.config.ts?

Ok thank you for your answer but it curious because I’ve checked in my project in 23 and everything is OK and I haven’t any file call “vite.config.ts” in my project in that version. In 24 I have this file, and another import generate error ini my style.css : @import url(‘line-awesome/dist/line-awesome/css/line-awesome.min.css’); I don’t know what is “CSS preprocessor”

but I allow myself to go in that direction

Probably didn’t use Vite in V23, but if that @fontsource/poppins asset has ever actually worked, there must have been some non-Vaadin solution in place to resolve it to an actual URL.

Maybe your project used WebPack in V23, but is now using Vite as that is the default in V24. If that @fontsource url was working due to some webpack setup, you probably need to switch from Vite to WebPack. Here’s a SO comment about how to do that: https://stackoverflow.com/a/73628432/298103

(Note that it’s possible that it didn’t produce an error in V23, but that it also didn’t work.)

Whoever set that project up for you probably knows where it came from, so I would propose asking them.

You should probably update your project to the latest Vaadin 23 ( using vite and removing all the deprecating API) then bump to Vaadin 24.

OK I 'll try that first. Thks

Your advise is to switch vite to WebPack but use “vite” is a better solution in a project ? Is it a Vaadin recommendation ?

I have my answer. When I try to upgrade to the 23 last version, I have a message in my console "Using webpack with Vaadin applications is deprecated and the support
for reactivating it would be removed in the next major release. ". So I’m going to try to use “Vite”

It’s wired. When I’ve upgraded in the last version in 23, with “vite”, I had no error and all was correct.

I upgrade my code in 24.0.4 and I have the error mentionned at the beginning of my post. For information I use npmPackage annotation in my “Application.java” : @NpmPackage(value = “line-awesome”, version = “1.3.0”)
@NpmPackage(value = “@fontsource/poppins”, version = “4.5.0”)

The error message is

java.lang.IllegalStateException: Asset ‘/@fontsource/poppins’ is not found in project frontend directory, default development bundle or in the application bundle ‘src/main/dev-bundle/assets/’.
Verify that the asset is available in ‘frontend/themes/partfinder/’ directory and is added into the ‘assets’ block of the ‘theme.json’ file.

If you enable Vite in Vaadin 24 (vaadin.frontend.hotdeploy=true) then it will work like in Vaadin 23.

The way to make it work with the dev bundle is to add

  "assets" : {
    "@fontsource/poppins" : {
      "*.css" : "@fontsource/poppins",
      "files/*" : "@fontsource/poppins/files"
    }
  }

to theme.json

This is because by default in Vaadin 24, a JS bundle is used for JavaScript files but the theme is left outside it. Then you do not need a node_modules folder when developing the project. The downside being that you need to specify in theme.json that it should make some parts of the node_modules available always, as the theme needs it