Breadcrumb fails with Vaadin 23

[priand]

I just updated a 22.0.0 project to 23.2.3 and I'm now getting the error below. The rest of the project works well without the breadcrumb component.

[plugin:vite:import-analysis] Failed to resolve import "@polymer/iron-media-query" from "node_modules/@vaadin-component-factory/vcf-breadcrumb/theme/lumo/vcf-breadcrumb.js". Does the file exist?
/Users/priand/phildev/monflabs/DraftDB/java/parent-explorer/explorer-flow-old/node_modules/.vite/deps/@vaadin-component-factory_vcf-breadcrumb_theme_lumo_vcf-breadcrumb__js.js:319:41
317|  var iron_media_query_exports = {};
318|  __reExport(iron_media_query_exports, iron_media_query_star);
319|  import * as iron_media_query_star from "@polymer/iron-media-query";
   |                                          ^
320|  
321|  // node_modules/@vaadin-component-factory/vcf-breadcrumb/src/vcf-breadcrumbs.js
    at formatError (file:///Users/priand/phildev/monflabs/DraftDB/java/parent-explorer/explorer-flow-old/node_modules/vite/dist/node/chunks/dep-665b0112.js:40782:46)
    at TransformContext.error (file:///Users/priand/phildev/monflabs/DraftDB/java/parent-explorer/explorer-flow-old/node_modules/vite/dist/node/chunks/dep-665b0112.js:40778:19)
    at normalizeUrl (file:///Users/priand/phildev/monflabs/DraftDB/java/parent-explorer/explorer-flow-old/node_modules/vite/dist/node/chunks/dep-665b0112.js:37514:33)
    at async TransformContext.transform (file:///Users/priand/phildev/monflabs/DraftDB/java/parent-explorer/explorer-flow-old/node_modules/vite/dist/node/chunks/dep-665b0112.js:37648:47)
    at async Object.transform (file:///Users/priand/phildev/monflabs/DraftDB/java/parent-explorer/explorer-flow-old/node_modules/vite/dist/node/chunks/dep-665b0112.js:41031:30)
    at async loadAndTransform (file:///Users/priand/phildev/monflabs/DraftDB/java/parent-explorer/explorer-flow-old/node_modules/vite/dist/node/chunks/dep-665b0112.js:37292:29
Click outside or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

[StefanPenndorf]

I experienced the bug as well with Vaadin 23. I found a workaround by explicitly adding the required iron-media-query dependency as @NpmPackage. The @NpmPackage Annotation wasn't picked up on the component using the Breadcrumb (which extends from AppLayout that has @NpmPackage annotations itself). Thus I added it to the Spring Boot Application class:

@NpmPackage(value = "@polymer/iron-media-query", version = "3.0.1")
public class PortalWarSpringbootApplication extends SpringBootServletInitializer implements AppShellConfigurator {
....
}