https://kotlinlang.org logo
Channels
Powered by
#compose-web
Title
# compose-web
c

Cleveland Shaw

10/10/2023, 3:12 PM
Hi All, I have downloaded the Image loader project from this LINK and tried to run it in desktop and web version, unfortunately i am getting the errors in the log attached. I tried to resolve it by changing to the latest version on Maven but it is still complaining. Any help will be greatly appreciated Thanks In Advance
imagerLoaderLog.txt
l

Leandro Borges Ferreira

10/10/2023, 4:19 PM
This version 
1.5.2.1-Beta
looks odd. I think you should use 
1.5.3
or 
1.5.2
take a look: https://mvnrepository.com/artifact/org.jetbrains.compose.runtime/runtime-desktop
You can choose the version of the plugins inside the file 
build.gradle.kts
. Like this:
Copy code
plugins {
    id("org.jetbrains.compose") version("1.5.2") apply false
}
c

Cleveland Shaw

10/10/2023, 4:23 PM
Thank you, i will try it now and update on the result
👍 1
I got the Desktop version to work but i have to use below inside 
gradle.properties
i done the following
Copy code
compose.version=1.5.10-beta02
compose.compiler=1.5.2.1-Beta3
Then in 
build.gradle.kt
i done below
Copy code
val isComposeCompiler = requested.module.group.startsWith("org.jetbrains.compose.compiler")
if (isComposeCompiler) {
    val composeCompiler = project.property("compose.compiler") as String
    useVersion(composeCompiler)
}
Thank you again
l

Leandro Borges Ferreira

10/10/2023, 6:57 PM
It is good to know that it worked for you =]
c

Cleveland Shaw

10/10/2023, 10:09 PM
I am able to run android and desktop version, but unable to get Web version to work. attached is a chrome browser screenshot and command line output screenshot. In the Command line output i observed this 
Module not found: Error: Can't resolve 'skia'
Is 
skia
required to get the web version to work, if yes how can I go about resolving this. Also, how can I bypass this warning screen in chrome browser screenshot below (and go to the compose UI) PLEASE NOTE: i am using MacOS Thanks In advance
l

Leandro Borges Ferreira

10/10/2023, 10:34 PM
It is hard to debug your problem because I don't have your code. But I feel your pain, I was trying to make this work for the past 2 days and it was so hard hahaha, but in the end it is going to work don't worry. 🤔 Maybe you need to load the 
skia
script in your 
index.html
file? I didn't have this problem when i was trying to make it work, so I'm not sure. About the warning, just configure Google Chrome like it suggests in the logs. You'll have enable garbage collection for webassembly. One solution is to take a look in another example and see how it works... then you can compare both of them to understand the configuration. I just configured the web app in a project that I'm working: https://github.com/leandroBorgesFerreira/Writeopia. If you run: 
./gradlew jsBrowserRun
it should start the webapp. It works just fine on my side and I'm also using macOS haha. Maybe this can help you.
c

Cleveland Shaw

10/10/2023, 10:41 PM
I will try yours and see. Thanks again
😄 1
o

Oleksandr Karpovich [JB]

10/12/2023, 10:45 AM
Regarding 'skia' problem. It became an issue after updating to kotlin 1.9.20-Beta and newer, irrc. The workaround is to add this in webpack.config.d: https://github.com/JetBrains/skiko/blob/wasm-try-skiko-es6/samples/SkiaMultiplatformSample/webpack.config.d/wasm/config.js#L21 Or try updating to the most recent main branch - https://github.com/Kotlin/kotlin-wasm-examples (i see you use this example)
c

Cleveland Shaw

10/12/2023, 3:23 PM
Hi @Oleksandr Karpovich [JB] I greatly appreciated your suggestions, i tried all possibilities mentioned but still no break through, see below 1. Added the 
config.js
inside 
webpack.config.d
, this did not work, so i tried to load the 
config.js
inside 
index.html
like this 
<script src="config.js"></script>
and still no result. 2. I have clone the latest main branch from here: https://github.com/Kotlin/kotlin-wasm-examples and still no result. still showing the 
index.html
view instead of the Compose View. I tried these projects 
compose-jetsnack
, 
compose-imageviewer
and 
browser-example
but still showing the 
index.html
view, please see attachment for screenshot. Ideally I would like to get the web version working as I would love to use it as a template but struggling to achieve this, please assist me with a template that works with jetpack compose for the WEB PLEASE NOTE: I am a Android developer, i am just trying to learn the WEB with Jetpack Compose Thanks In Advance
o

Oleksandr Karpovich [JB]

10/12/2023, 4:16 PM
@Cleveland Shaw I see. The most recent k/wasm version generates wasm code which can currently run only in Chrome dev: https://www.google.com/chrome/dev Also. please make sure you follow the instruction to enable wasm gc (the instruction on index.html page you see)
c

Cleveland Shaw

10/12/2023, 4:39 PM
Thank you, it worked on the ChromeDev. How long below it can run on a normal browser.
o

Oleksandr Karpovich [JB]

10/12/2023, 4:43 PM
It depends on how soon Chrome updates it 🙂 Not sure if they have a release schedule in public access
8 Views
Powered by