search

vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
448 stars 83 forks source link

Flow-Hilla Hybrid Applications. vaadin-lumo-styles version undefined #7289

Closed XandrMaster closed 5 months ago

XandrMaster commented 5 months ago

Description

Hello ! I was trying to follow this manual https://vaadin.com/docs/latest/integrations/hilla . I need to check possibility Flow-Hilla Hybrid Applications. App launched fine , but no any screen on web form . Error in web console :

Tried to define vaadin-lumo-styles version undefined when version 24.3.10 is already in use. Something will probably break. console.error @ (index):7

Tried to define vaadin-input-container version undefined when version 24.3.10 is already in use. Something will probably break. console.error @ (index):7

Screen attached ... Thanks.

Expected outcome

Expected to work fine :)

Minimal reproducible example

import org.jetbrains.kotlin.gradle.tasks.KotlinCompile

plugins { id("org.springframework.boot") version "3.2.4" id("io.spring.dependency-management") version "1.1.4" id("dev.hilla") version "2.5.7" kotlin("jvm") version "1.9.22" kotlin("plugin.spring") version "1.9.23" kotlin("plugin.jpa") version "1.9.23" }

group = "com.test" version = "0.0.1-SNAPSHOT"

java { sourceCompatibility = JavaVersion.VERSION_21 targetCompatibility = JavaVersion.VERSION_21 toolchain { languageVersion.set(JavaLanguageVersion.of(21)) } }

configurations { compileOnly { extendsFrom(configurations.annotationProcessor.get()) } }

repositories { mavenCentral() maven(url = "https://maven.vaadin.com/vaadin-addons") gradlePluginPortal() }

extra["vaadinVersion"] = "24.3.7" val ktor_version = "2.3.9" val hillaVersion = "2.5.7"

dependencies { implementation("org.springframework.boot:spring-boot-starter-web") implementation("org.springframework.boot:spring-boot-starter-thymeleaf") implementation("org.springframework.boot:spring-boot-starter-security") implementation("org.springframework.boot:spring-boot-starter-actuator") implementation("org.springframework.boot:spring-boot-starter-data-jpa") implementation("org.springframework.boot:spring-boot-starter-validation") implementation("org.springframework.boot:spring-boot-starter-mail") implementation("org.springframework.boot:spring-boot-starter-oauth2-client") implementation("com.fasterxml.jackson.module:jackson-module-kotlin") implementation("dev.hilla:hilla-react-spring-boot-starter") implementation("dev.hilla:hilla-react") implementation("org.parttio:line-awesome:2.0.0") // Http Client implementation("io.ktor:ktor-client-cio:$ktor_version") implementation("io.ktor:ktor-client-logging:$ktor_version")

developmentOnly("org.springframework.boot:spring-boot-devtools")
runtimeOnly("com.h2database:h2")
runtimeOnly("org.postgresql:postgresql:42.7.3")
annotationProcessor("org.springframework.boot:spring-boot-configuration-processor")
testImplementation("org.springframework.boot:spring-boot-starter-test")
testImplementation("org.springframework.security:spring-security-test")
// Vaadin tests

// testImplementation("org.seleniumhq.selenium:org.seleniumhq.selenium")

// coroutines
implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.8.0")

// implementation("org.jetbrains.kotlin:kotlin-reflect") // implementation("io.projectreactor.kotlin:reactor-kotlin-extensions") // implementation("org.jetbrains.kotlinx:kotlinx-coroutines-reactor") // implementation("org.springframework.boot:spring-boot-starter-webflux")

// Fortest

// implementation("org.hibernate.orm:hibernate-core:6.2.3.Final")

// Google maps component https://vaadin.com/directory/component/google-maps-addon
implementation("com.flowingcode.vaadin.addons:google-maps:1.8.3")
implementation("org.flywaydb:flyway-core:10.10.0")

implementation("com.google.guava:guava:33.1.0-jre")

implementation("org.vaadin.elmot:vaadin-geo-location-flow-v14:2.0.1")
implementation("com.github.mvysny.karibudsl:karibu-dsl:2.1.2")

}

dependencyManagement { imports { mavenBom("com.vaadin:vaadin-bom:${property("vaadinVersion")}") mavenBom("dev.hilla:hilla-bom:$hillaVersion") } }

tasks.withType { kotlinOptions { freeCompilerArgs += "-Xjsr305=strict" jvmTarget = "21" } }

tasks.withType { useJUnitPlatform() }

sourceSets { main { kotlin { srcDirs("../../coreUtils/vaadinUtils/src/main/kotlin") } } }

Steps to reproduce

  1. Create simple Vaadin project
  2. Following to this manual https://vaadin.com/docs/latest/integrations/hilla
  3. Copy my gradle file ...

import org.jetbrains.kotlin.gradle.tasks.KotlinCompile

plugins { id("org.springframework.boot") version "3.2.4" id("io.spring.dependency-management") version "1.1.4" id("dev.hilla") version "2.5.7" kotlin("jvm") version "1.9.22" kotlin("plugin.spring") version "1.9.23" kotlin("plugin.jpa") version "1.9.23" }

group = "com.test" version = "0.0.1-SNAPSHOT"

java { sourceCompatibility = JavaVersion.VERSION_21 targetCompatibility = JavaVersion.VERSION_21 toolchain { languageVersion.set(JavaLanguageVersion.of(21)) } }

configurations { compileOnly { extendsFrom(configurations.annotationProcessor.get()) } }

repositories { mavenCentral() maven(url = "https://maven.vaadin.com/vaadin-addons") gradlePluginPortal() }

extra["vaadinVersion"] = "24.3.7" val ktor_version = "2.3.9" val hillaVersion = "2.5.7"

dependencies { implementation("org.springframework.boot:spring-boot-starter-web") implementation("org.springframework.boot:spring-boot-starter-thymeleaf") implementation("org.springframework.boot:spring-boot-starter-security") implementation("org.springframework.boot:spring-boot-starter-actuator") implementation("org.springframework.boot:spring-boot-starter-data-jpa") implementation("org.springframework.boot:spring-boot-starter-validation") implementation("org.springframework.boot:spring-boot-starter-mail") implementation("org.springframework.boot:spring-boot-starter-oauth2-client") implementation("com.fasterxml.jackson.module:jackson-module-kotlin") implementation("dev.hilla:hilla-react-spring-boot-starter") implementation("dev.hilla:hilla-react") implementation("org.parttio:line-awesome:2.0.0") // Http Client implementation("io.ktor:ktor-client-cio:$ktor_version") implementation("io.ktor:ktor-client-logging:$ktor_version")

developmentOnly("org.springframework.boot:spring-boot-devtools")
runtimeOnly("com.h2database:h2")
runtimeOnly("org.postgresql:postgresql:42.7.3")
annotationProcessor("org.springframework.boot:spring-boot-configuration-processor")
testImplementation("org.springframework.boot:spring-boot-starter-test")
testImplementation("org.springframework.security:spring-security-test")
// Vaadin tests

// testImplementation("org.seleniumhq.selenium:org.seleniumhq.selenium")

// coroutines
implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.8.0")

// implementation("org.jetbrains.kotlin:kotlin-reflect") // implementation("io.projectreactor.kotlin:reactor-kotlin-extensions") // implementation("org.jetbrains.kotlinx:kotlinx-coroutines-reactor") // implementation("org.springframework.boot:spring-boot-starter-webflux")

// Fortest

// implementation("org.hibernate.orm:hibernate-core:6.2.3.Final")

// Google maps component https://vaadin.com/directory/component/google-maps-addon
implementation("com.flowingcode.vaadin.addons:google-maps:1.8.3")
implementation("org.flywaydb:flyway-core:10.10.0")

implementation("com.google.guava:guava:33.1.0-jre")

implementation("org.vaadin.elmot:vaadin-geo-location-flow-v14:2.0.1")
implementation("com.github.mvysny.karibudsl:karibu-dsl:2.1.2")

}

dependencyManagement { imports { mavenBom("com.vaadin:vaadin-bom:${property("vaadinVersion")}") mavenBom("dev.hilla:hilla-bom:$hillaVersion") } }

tasks.withType { kotlinOptions { freeCompilerArgs += "-Xjsr305=strict" jvmTarget = "21" } }

tasks.withType { useJUnitPlatform() }

sourceSets { main { kotlin { srcDirs("../../coreUtils/vaadinUtils/src/main/kotlin") } } }

Environment

Hilla: ? Flow: 24.3.7 Vaadin: 24.3.7 Java: Oracle Corporation 21.0.2 OS: x86_64 Mac OS X 14.0 Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36 Live reload: Java active

Browsers

Chrome

web-padawan commented 5 months ago

Thanks for the issue. The error means that you have two different versions of Vaadin web components installed. Please consider creating a reproduction repository with this configuration so it can be easier to reproduce.

XandrMaster commented 5 months ago

Thanks for the issue. The error means that you have two different versions of Vaadin web components installed. Please consider creating a reproduction repository with this configuration so it can be easier to reproduce.

Thanks for quick reply . Do you meant conflict with version 24.3.10 ? If so , it's no possible :) , because Vaadin version 24.3.10 dosn't exist at all as far as I know, I could wrong :)

XandrMaster commented 5 months ago

Thanks for the issue. The error means that you have two different versions of Vaadin web components installed. Please consider creating a reproduction repository with this configuration so it can be easier to reproduce.

I have created git repo for reproduce the issue , take a look pls https://github.com/XandrMaster/flow_Hilla_hybrid_app.git

web-padawan commented 5 months ago

Do you meant conflict with version 24.3.10 ? If so , it's no possible

This is the Vaadin web components version, it can diverge with the Vaadin version (so the patch release doesn't match).

web-padawan commented 5 months ago

Checked the repo and the issue is caused by older version of @vaadin/bundles in package.json - it's set to 24.3.0 while should be 24.3.8. The logging output also contains errors below that might be related to duplicate versions:

 @vaadin/bundles has version mismatches with installed packages, Vaadin component dependency bundles are disabled.
 Packages with version mismatches: [
   {
     "name": "lit",
     "bundledVersion": "3.1.0",
     "installedVersion": "3.1.2"
   },
   {
     "name": "@vaadin/app-layout",
     "bundledVersion": "24.3.0",
     "installedVersion": "24.3.10"
   }
...

Also, the version of @hilla/react-components should be 2.3.10 and not 2.3.0 as it depends on web components.

web-padawan commented 5 months ago

Got the project working by applying the following changes to package.json:

diff --git a/package.json b/package.json
index 0d72fe7..331a138 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@hilla/generator-typescript-plugin-subtypes": "2.5.5",
     "@hilla/generator-typescript-utils": "2.5.5",
     "@hilla/react-auth": "2.5.5",
-    "@hilla/react-components": "2.3.0",
+    "@hilla/react-components": "2.3.10",
     "@hilla/react-crud": "2.5.5",
     "@hilla/react-form": "2.5.5",
     "@polymer/polymer": "3.5.1",
@@ -25,7 +25,7 @@
     "@vaadin/app-layout": "24.3.10",
     "@vaadin/avatar": "24.3.10",
     "@vaadin/avatar-group": "24.3.10",
-    "@vaadin/bundles": "24.3.0",
+    "@vaadin/bundles": "24.3.10",
     "@vaadin/button": "24.3.10",
     "@vaadin/checkbox": "24.3.10",
     "@vaadin/checkbox-group": "24.3.10",
@@ -275,6 +275,6 @@
       "workbox-core": "7.0.0",
       "workbox-precaching": "7.0.0"
     },
-    "hash": "2c5df09cb4cfe42672cff195bc39bde63221b31e09eed4678f36a171dbc4386a"
+    "hash": "6d4f872ceb6ea11a69abed46a1762970e639729afbb76d02136a566c47144048"
   }
 }

After you re-run the project with these changes, Vaadin will update package-lock.json accordingly. Once that is done, node_modules folder should no longer contain duplicated npm dependencies.

XandrMaster commented 5 months ago

Got the project working by applying the following changes to package.json:

diff --git a/package.json b/package.json
index 0d72fe7..331a138 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@hilla/generator-typescript-plugin-subtypes": "2.5.5",
     "@hilla/generator-typescript-utils": "2.5.5",
     "@hilla/react-auth": "2.5.5",
-    "@hilla/react-components": "2.3.0",
+    "@hilla/react-components": "2.3.10",
     "@hilla/react-crud": "2.5.5",
     "@hilla/react-form": "2.5.5",
     "@polymer/polymer": "3.5.1",
@@ -25,7 +25,7 @@
     "@vaadin/app-layout": "24.3.10",
     "@vaadin/avatar": "24.3.10",
     "@vaadin/avatar-group": "24.3.10",
-    "@vaadin/bundles": "24.3.0",
+    "@vaadin/bundles": "24.3.10",
     "@vaadin/button": "24.3.10",
     "@vaadin/checkbox": "24.3.10",
     "@vaadin/checkbox-group": "24.3.10",
@@ -275,6 +275,6 @@
       "workbox-core": "7.0.0",
       "workbox-precaching": "7.0.0"
     },
-    "hash": "2c5df09cb4cfe42672cff195bc39bde63221b31e09eed4678f36a171dbc4386a"
+    "hash": "6d4f872ceb6ea11a69abed46a1762970e639729afbb76d02136a566c47144048"
   }
 }

After you re-run the project with these changes, Vaadin will update package-lock.json accordingly. Once that is done, node_modules folder should no longer contain duplicated npm dependencies.

Do you know @web-padawan that package.json - is autogenerated file ?

XandrMaster commented 5 months ago 
"@vaadin/bundles":

1712054166067 Those wrong duplicated versions came from your dev.hilla:hilla-react library, take a look to the picture.

web-padawan commented 5 months ago

package.json - is autogenerated file ?

Yes, it's auto-generated by Flow / Hilla when installing frontend dependencies but you can also edit it.

Those wrong duplicated versions came from your dev.hilla:hilla-react library

Yes, I think this needs to be reported to https://github.com/vaadin/hilla repository.

XandrMaster commented 5 months ago

Yes, it's auto-generated by Flow / Hilla when installing frontend dependencies but you can also edit it.

In my case if I run app it auto-generated and erase all my changes in package.json