I am trying to make the tutorials from a Jetpack Compose book but the app crashes when I start it:
This is the error code
2022-09-15 22:03:05.983 14360-14360/com.raywenderlich.android.jetreddit E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.raywenderlich.android.jetreddit, PID: 14360
java.lang.IllegalArgumentException: Only VectorDrawables and rasterized asset types are supported ex. PNG, JPG
at androidx.compose.ui.res.PainterResources_androidKt.loadImageBitmapResource(PainterResources.android.kt:99)
at androidx.compose.ui.res.PainterResources_androidKt.painterResource(PainterResources.android.kt:71)
at com.raywenderlich.android.jetreddit.components.PostKt.ImageContent(Post.kt:196)
at com.raywenderlich.android.jetreddit.components.PostKt$ImagePost$1.invoke(Post.kt:74)
at com.raywenderlich.android.jetreddit.components.PostKt$ImagePost$1.invoke(Post.kt:73)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
That's the position from the error code:
#Composable
fun ImageContent(image: Int) {
val imageAsset = ImageBitmap.imageResource(id = image)
Image(
bitmap = imageAsset,
contentDescription = stringResource(id = R.string.post_header_description),
modifier = Modifier
.fillMaxWidth()
.aspectRatio(imageAsset.width.toFloat() / imageAsset.height),
contentScale = ContentScale.Crop
)
}
#Composable
fun ImagePost(post: PostModel) {
Post(post) {
ImageContent(post.image ?: R.drawable.compose_course)
}
}
From the exception, It seems you are trying to load an image that is not supported by ImageBitmap.imageResource.
java.lang.IllegalArgumentException: Only VectorDrawables and rasterized asset types are supported ex. PNG, JPG.
Check that if the type of post.image or R.drawable.compose_course is supported by the API you are using.
Related
I have a project with several flavors. Each of these flavors has its own configuration which is available as a json file in the assets folder in the respective project structure.
In the theme definition I read the JSON using Gson and cast it into a corresponding model.
My problem is now the following:
At runtime of the app this all works wonderfully but in the composable preview in Android Studio it unfortunately only works for a single flavor. As soon as I switch to another flavor in the build variant, the json-asset of the old variant continues to load. Since the configuration also contains assets that are only available in the respective flavors, this leads to a crash of the preview.
I debugged the preview handling by throwing some exceptions during the casting and it seems, like if there'S something cached and not reset after build-variant change. A restart of Android Studio didn't also help so I don't quite know what to do about it.
Has anyone noticed a similar behavior and/or found a solution for it?
Here is some code to explain::
My theme definition:
object AppTheme {
val colors: AppColors
#Composable
#ReadOnlyComposable
get() = LocalAppColors.current
val typography: AppTypography
#Composable
#ReadOnlyComposable
get() = LocalAppTypography.current
val configuration: ConfigurationC
#Composable
#ReadOnlyComposable
get() = LocalAppConfiguration.current
}
private val LocalAppColors = staticCompositionLocalOf {
lightAppColors
}
private val LocalAppTypography = staticCompositionLocalOf {
appTypography
}
private val LocalAppConfiguration = staticCompositionLocalOf {
ConfigurationC()
}
#Composable
fun AppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: #Composable () -> Unit,
) {
val colors = if (darkTheme) darkAppColors else lightAppColors
CompositionLocalProvider(
LocalAppConfiguration provides ConfigurationC.init(LocalContext.current),
LocalAppColors provides colors,
LocalAppTypography provides typography,
) {
MaterialTheme(
colors = colors.materialColors,
typography = typography.materialTypography,
content = content,
)
}
}
A simple Preview:
#Composable
#Preview(name = "light", showBackground = true)
#Preview(name = "dark", showBackground = true, uiMode = UI_MODE_NIGHT_YES)
fun EnabledPreview() {
AppTheme {
Button.MyCustomButton(
modifier = Modifier,
title = "Custom Button",
font = AppTheme.configuration.font.h1
color = AppTheme.configuration.colors.text1
enabled = enabled,
onClick = {}
)
}
}
I am integrating Admob's banners in my app, this app runs both in AndroidTV and Android, where it's running in mobile the dimensions must be 320x50(BANNER) which is part of the standard sizes in the docs, but it turns of nowhere to 468x60(FULL_BANNER), this behavior happens oftentimes when you run the app. I am using Jetpack Compose for this, and the add is placed inside a LazyColumn which is the equivalent to a recycler view
My code for the banner is like this:
enum class BannerSize {
NORMAL,
RECTANGLE;
internal fun map(): AdSize = when (this) {
NORMAL -> AdSize.BANNER
RECTANGLE -> AdSize.MEDIUM_RECTANGLE
}
}
/*
This Composable goes inside a lazy column with other composable where I have a
when statement, where I look if the index is 0 or 5 which are the specific
indexes I want to place the ads.
*/
#Composable
internal fun BannerAd(
modifier: Modifier = Modifier,
size: BannerSize = BannerSize.NORMAL,
id: String = "TODO",
pos: String = "TODO",
adId: String,
) {
val isInEditMode = LocalInspectionMode.current
if (!isInEditMode) {
Box(
modifier = modifier
.fillMaxWidth()
.padding(20.dp),
contentAlignment = Alignment.Center
) {
AndroidView(
modifier = modifier
.height(size.map().height.dp)
.width(size.map().width.dp),
factory = { context ->
Napier.d(
tag = "Ads",
message = "Creating Ad, id: $id, adId: $adId, pos: $pos, size: $size"
)
AdView(context).apply {
adListener = object : AdListener() {
override fun onAdFailedToLoad(p0: LoadAdError) {
Napier.e(tag = "Ads", message = p0.message)
}
}
adSize = size.map()
adUnitId = adId
loadAd(
AdRequest.Builder()
.addNetworkExtrasBundle(
AdMobAdapter::class.java,
Bundle().also {
it.putString("pos", pos)
}
)
.build()
)
}
}
)
}
} else {
EditModeText()
}
}
Has someone encountered something like this while integrating ads with Compose? I've looking for some questions related to this, but I haven't found any
Well, after doing a lot research, turns out it was something related to Android view's lifecycle, to avoid this weird behaviour I did what is in this answer
: AdManagerAdView not rendering ad image when off screen in LazyColumn
We must set the ad during on doOnLayout method, and It will fix this problem for now.
I have a caller app that allows the user to pick up photos for the contacts and audio files for the ringtones from their mobile.
When I pick up the photo, it can be displayed correctly using the URI on the interface. on both the main page and contact page.
and i save it inside the room database...
if i close the app and reopen it, it gets the same URI from db. but no image is displayed. neither on the main page or contact page.
i tried to insert the URI code manually it didn't display anything as well... also change the image loader to GlideImage from rememberImagePainter (another implementation) but same issue...
the URI i have from db and image picker looks like this
val uri2:Uri = "content://com.android.providers.media.documents/document/image%3A34".toUri()
the code the pick up the image Uri is this
class GetContentActivityResult(
private val launcher: ManagedActivityResultLauncher<String, Uri>,
val uri: Uri?
) {
fun launch(mimeType: String) {
launcher.launch(mimeType)
}
}
#Composable
fun rememberGetContentActivityResult(): GetContentActivityResult {
var uri by rememberSaveable { mutableStateOf<Uri?>(null) }
val launcher = rememberLauncherForActivityResult(ActivityResultContracts.GetContent(), onResult = {
uri = it
})
return remember(launcher, uri) { GetContentActivityResult(launcher, uri) }
}
i display the image in the contact page like this
val getContent = rememberGetContentActivityResult() <-- to access the class of pickup files
if (roomViewModel.photoUri.value.isBlank()){ <-- if no image from db display the picked image using image picker
getContent.uri?.let {
Image(
modifier = Modifier
.align(Alignment.TopCenter)
.fillMaxSize(1f),
contentDescription = "UserImage",
contentScale = ContentScale.Crop,
painter = rememberImagePainter(data = it))
}
}else{
Image(
modifier = Modifier
.align(Alignment.TopCenter)
.fillMaxSize(1f),
contentDescription = "UserImage",
contentScale = ContentScale.Crop,
painter = rememberImagePainter(data = roomViewModel.photoUri.value))
}
}
TextButton(
onClick = { getContent.launch("image/*") }, <-- launching the class to get the image URI by defining the Mime as image/*
modifier = Modifier.layoutId("changePhoto")
) {
Text(
text = "Change Photo",
color = Color.Black)}
inside the main page. there is no image picker, i just display the data that i have in the Database, and i display the image this way
#OptIn(ExperimentalCoilApi::class)
#Composable
fun ProfilePicture(uri : Uri, imageSize: Dp) {
Card(
shape = CircleShape,
border = BorderStroke(
width = 2.dp,
color = Color.Red ),
modifier = Modifier.padding(16.dp),
elevation = 4.dp) {
val uri2:Uri = "content://com.android.providers.media.documents/document/image%3A34".toUri() //<-- i tried to load the image this way also it didn't work.
val painter = rememberImagePainter(
data = uri,
builder = {
placeholder(R.drawable.yara) <-- the placeholder image blinks quickly when app is loaded and then disappear...
}
)
Image(
painter = painter,
contentDescription = "User Image",
modifier = Modifier.size(imageSize) )
}
}
Is it an issue with the Uri picker or image display?
other content from room db are displayed correctly (strings)
i tried to use the code on emulator and real device and it is the same for both cases...
one thing i just noticed... if i used the image picker and pick a previously picked image (it's uri is in the db) the image is displayed on the other locations in the app automatically without doing anything else... just picking the image and displaying it without saving it even...
Well, I didn't know how to do the takePersistableUriPermission(), I'm still learning. But I created a converter class (the longest way solution) to use the Uri to convert it to bit map... but i have to make it drawable first. I didn't know how to do it bitmap from Uri directly.
I updated the data class in the first place
#Entity
data class Contact(
#PrimaryKey()
val id: UUID = UUID.randomUUID(),
val name: String,
val land_line : String,
val mobile: String,
val contact_photo: Bitmap
)
Added a TypeConverter for the bitmap in database
#TypeConverter
fun fromBitmap(bitmap: Bitmap): ByteArray {
val outputStream = ByteArrayOutputStream()
bitmap.compress(Bitmap.CompressFormat.PNG, 100, outputStream)
return outputStream.toByteArray()
}
#TypeConverter
fun toBitmap(byteArray: ByteArray): Bitmap {
return BitmapFactory.decodeByteArray(byteArray, 0, byteArray.size)
}
Changed the values types all the way to UI, and created a converter class in the Util package to convert the Uri into drawable then Bitmap (I know it looks stupid - any better solution is accepted).
suspend fun convertToBitmap(uri: Uri, context: Context, widthPixels: Int, heightPixels: Int): Bitmap? {
val mutableBitmap = Bitmap.createBitmap(widthPixels, heightPixels, Bitmap.Config.ARGB_8888)
val canvas = Canvas(mutableBitmap)
val drawable = getDrawable(uri, context)
drawable?.setBounds(0, 0, widthPixels, heightPixels)
drawable?.draw(canvas)
return mutableBitmap
}
#OptIn(ExperimentalCoilApi::class)
suspend fun getDrawable(uri: Uri, context: Context): Drawable? {
val imageLoader = ImageLoader.Builder(context)
.availableMemoryPercentage(0.25)
.allowHardware(false)
.crossfade(true)
.build()
val request= ImageRequest.Builder(context)
.data(uri)
.build()
return imageLoader.execute(request).drawable
}
It is working now and loading perfectly. I know that I have the width and height by 50 50 px, but this is a test anyway.
In jetpack compose, you can display drawables easily with the Image composable like this:
Image(painter = painterResource(id = R.drawable.my_drawable))
I'm building an app that requires listing all the apps on the device and I need to display their icons. I managed to get the icons using the PackageManager class:
val packageManager = context.packageManager
val installedPackages = packageManager.getInstalledPackages(0)
val packageInfo = installedPackages[0]
val iconId: Int = packageInfo.applicationInfo.icon
Then:
Image(painter = painterResource(id = iconId))
But the app crashes everytime. I don't know where the problem is? Any Idea? Thanks
android.content.res.Resources$NotFoundException: Resource ID #0x7f030001
For some reason icon may contain identifier that points to non-existent drawable.
To get application icon use method loadIcon:
val icon: Drawable = applicationInfo.loadIcon(packageManager)
Or method getApplicationIcon from PackageManager:
val icon: Drawable = packageManager.getApplicationIcon(applicationInfo)
Then, use AndroidDrawablePainter to convert Drawable to Painter:
Image(painter = AndroidDrawablePainter(icon))
Or DrawablePainter is available in accompanist library:
Image(painter = DrawablePainter(icon))
If you're using the Coil library, rememberImagePainter will accept an Any? as its data argument, allowing you to use the Drawable returned from the PackageManager, like so:
Image(
painter = rememberImagePainter(
data = LocalContext.current.packageManager.getApplicationIcon("com.package.example")
)
)
Trying to play around with Jetpack Compose and got stuck in the first activiity itself.
My App crashes on launch with below exception:
E/AndroidRuntime: FATAL EXCEPTION: main
Process: io.chanse.locals.cerve.dev, PID: 19105
java.lang.NoSuchMethodError: No static method ChanseTheme(ZLkotlin/jvm/functions/Function2;Landroidx/compose/runtime/Composer;II)V in class Lio/chanse/locals/commonui/theme/ChanseThemeKt; or its super classes (declaration of 'io.chanse.locals.commonui.theme.ChanseThemeKt' appears in /data/app/io.chanse.locals.cerve.dev-E-UJEroB15OQtmBe0WnvGw==/base.apk!classes5.dex)
at io.chanse.locals.cerve.location.LocationActivity.Screen(LocationActivity.kt:45)
at io.chanse.locals.cerve.location.LocationActivity$onCreate$1.invoke(LocationActivity.kt:39)
at io.chanse.locals.cerve.location.LocationActivity$onCreate$1.invoke(LocationActivity.kt:38)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.kt:121)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.kt:46)
at androidx.compose.ui.platform.ComposeView.Content(ComposeView.android.kt:333)
at androidx.compose.ui.platform.AbstractComposeView$ensureCompositionCreated$1.invoke(ComposeView.android.kt:179)
at androidx.compose.ui.platform.AbstractComposeView$ensureCompositionCreated$1.invoke(ComposeView.android.kt:178)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.kt:121)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.kt:46)
at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:193)
at androidx.compose.ui.platform.CompositionLocalsKt.ProvideCommonCompositionLocals(CompositionLocals.kt:148)
at androidx.compose.ui.platform.AndroidCompositionLocals_androidKt$ProvideAndroidCompositionLocals$3.invoke(AndroidCompositionLocals.android.kt:114)
at androidx.compose.ui.platform.AndroidCompositionLocals_androidKt$ProvideAndroidCompositionLocals$3.invoke(AndroidCompositionLocals.android.kt:113)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.kt:121)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.kt:46)
at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:193)
at androidx.compose.ui.platform.AndroidCompositionLocals_androidKt.ProvideAndroidCompositionLocals(AndroidCompositionLocals.android.kt:106)
at androidx.compose.ui.platform.WrappedComposition$setContent$1$1$3.invoke(Wrapper.android.kt:162)
at androidx.compose.ui.platform.WrappedComposition$setContent$1$1$3.invoke(Wrapper.android.kt:161)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.kt:121)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.kt:46)
at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:193)
at androidx.compose.ui.platform.WrappedComposition$setContent$1$1.invoke(Wrapper.android.kt:161)
at androidx.compose.ui.platform.WrappedComposition$setContent$1$1.invoke(Wrapper.android.kt:144)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.kt:121)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.kt:46)
at androidx.compose.runtime.ComposerKt.invokeComposable(Composer.kt:3418)
at androidx.compose.runtime.ComposerImpl.composeContent$runtime_release(Composer.kt:2600)
at androidx.compose.runtime.CompositionImpl.composeContent(Composition.kt:348)
at androidx.compose.runtime.Recomposer.composeInitial$runtime_release(Recomposer.kt:693)
at androidx.compose.runtime.CompositionImpl.setContent(Composition.kt:304)
at androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:144)
at androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:135)
at androidx.compose.ui.platform.AndroidComposeView.setOnViewTreeOwnersAvailable(AndroidComposeView.android.kt:603)
at androidx.compose.ui.platform.WrappedComposition.setContent(Wrapper.android.kt:135)
E/AndroidRuntime: at androidx.compose.ui.platform.WrappedComposition.onStateChanged(Wrapper.android.kt:187)
at androidx.lifecycle.LifecycleRegistry$ObserverWithState.dispatchEvent(LifecycleRegistry.java:354)
at androidx.lifecycle.LifecycleRegistry.addObserver(LifecycleRegistry.java:196)
at androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:142)
at androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:135)
at androidx.compose.ui.platform.AndroidComposeView.onAttachedToWindow(AndroidComposeView.android.kt:667)
at android.view.View.dispatchAttachedToWindow(View.java:21304)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:4239)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:4246)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:4246)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:4246)
at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:4246)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2571)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:2225)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:9126)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:999)
at android.view.Choreographer.doCallbacks(Choreographer.java:797)
at android.view.Choreographer.doFrame(Choreographer.java:732)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:984)
at android.os.Handler.handleCallback(Handler.java:883)
at android.os.Handler.dispatchMessage(Handler.java:100)
at android.os.Looper.loop(Looper.java:237)
at android.app.ActivityThread.main(ActivityThread.java:8173)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:496)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1100)
Here is my Activity code (:app module):
class LocationActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Screen()
}
}
#Composable
fun Screen() {
ChanseTheme {
Column(
verticalArrangement = Arrangement.Center
) {
PinCodeField()
}
}
}
#Composable
fun PinCodeField() {
var text by rememberSaveable { mutableStateOf("") }
OutlinedTextField(
value = text,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
onValueChange = { text = it },
label = { Text(stringResource(R.string.ask_pincode)) },
leadingIcon = { Icon(Icons.Filled.LocationOn, null) },
trailingIcon = { Icon(Icons.Filled.ArrowForward, null) },
singleLine = true,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
)
}
}
Here is my Theme present in ChanseTheme.kt (:commonui module)
#Composable
fun ChanseTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: #Composable () -> Unit
) {
MaterialTheme(
colors = if (darkTheme) DarkColors else LightColors,
) {
content()
}
}
And my colors present in ChanseColors.kt (:commonui module)
val DarkColors = darkColors(
primary = Purple200,
primaryVariant = Purple600,
secondary = Green200,
secondaryVariant = Green500,
background = Black900,
surface = Black800,
error = Red200,
onPrimary = Black900,
onSecondary = Black900,
onBackground = White50,
onSurface = White50,
onError = Black900
)
val LightColors = lightColors(
primary = Purple500,
primaryVariant = Purple700,
secondary = Green200,
secondaryVariant = Green500,
background = White50,
surface = White50,
error = Red600,
onPrimary = White50,
onSecondary = Black900,
onBackground = Black900,
onSurface = Black900,
onError = White50
)
FYI: Here is the dependecies: (:buildSrc module)
object Activity {
const val activityCompose = "androidx.activity:activity-compose:1.3.0-alpha04"
}
object Compose {
const val version = "1.0.0-beta02"
const val runtime = "androidx.compose.runtime:runtime:$version"
const val runtimeLivedata = "androidx.compose.runtime:runtime-livedata:$version"
const val material = "androidx.compose.material:material:$version"
const val icon = "androidx.compose.material:material-icons-core:$version"
const val iconX = "androidx.compose.material:material-icons-extended:$version"
const val foundation = "androidx.compose.foundation:foundation:$version"
const val layout = "androidx.compose.foundation:foundation-layout:$version"
const val ui = "androidx.compose.ui:ui:$version"
const val tooling = "androidx.compose.ui:ui-tooling:$version"
const val animation = "androidx.compose.animation:animation:$version"
const val uiTest = "androidx.compose.ui:ui-test-junit4:$version"
}
object Lifecycle {
const val viewModelCompose = "androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha03"
}
The above dependencies are present in :commonui module as api and the entire module is used as dependency in :app module.
What could go wrong here? Any help would be appreciated.
This issue was caused because your :commonui doesn't configure build.gradle file in an appropriate for jetpack compose way:
android {
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerVersion = kotlin_version
kotlinCompilerExtensionVersion = compose_version
}
kotlinOptions {
jvmTarget = '1.8'
useIR = true
}
}
Try to configure :commonui and all traversal modules in this way and it should work.
Traversal modules:
for example you have the next module graph -> :commonui-> A ->
module_which_has_a_problem In this situation, you have to configure
module A in the same way
I believe this is a bug. I get the same error when I run Previews on a real device sometimes. So I suggest :
Making sure you're running the Activity and not the Preview (check the selected run configuration next to the run button)
Try to run on the emulator
Compose tooling is quite unstable at the moment, in my experience. Be prepared to do things like invalidate cache, alternate compose versions to force some kind of reset, etc.
I fixed it with below changes:
Moved my ChanseTheme.kt and ChanseColors.kt files from :commonui module to :app module and it started working.
But I am not sure, why it doesn't work if those two files were present in my :commonui module.
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerVersion = kotlin_version
kotlinCompilerExtensionVersion = compose_version
}
These two blocks are needed in each modules using compose, even when you are importing the compose dependencies in a common module.
It seems that this issue is because you're using the multiplatform plugin. If your :commonui module was pure android ("kotlin-android" instead of "org.jetbrains.kotlin.multiplatform") it would run without crashes.
In order to fix this and keep using multiplatform, simply add this plugin on your module: id("org.jetbrains.compose").version("1.1.0").
You may also need to add this as a repository: maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")