https://kotlinlang.org logo
#webassembly
Title
# webassembly
a

Ahmad Hassan

02/21/2024, 11:46 AM
How to add web support in existing KMP application? I'm trying add but facing following issue after adding this code:
Copy code
@OptIn(ExperimentalWasmDsl::class)
wasmJs {
    browser()
}
Issue:
Copy code
Failed to apply plugin class 'org.gradle.language.base.plugins.LifecycleBasePlugin'.
> Cannot add task 'clean' as a task with that name already exists.
Can anyone suggest what is the issue?
j

Javier

02/21/2024, 12:01 PM
You are creating a task with the name
clean
, but it is already created as that plugin creates it and other ones like
assemble
or
build
So change any
create("clean")
or
register("clean")
to
named("clean")
a

Ahmad Hassan

02/21/2024, 12:19 PM
Copy code
tasks.named("clean", Delete::class) {
    delete(rootProject.buildDir)
}
Tried this as well but didn't work. After removing, now facing other issues
Copy code
> Could not resolve moe.tlaster:precompose:1.5.4.
  Required by:
      project :shared
   > No matching variant of moe.tlaster:precompose:1.5.4 was found. The consumer was configured to find a library for use during 'kotlin-api', preferably optimized for non-jvm, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm', attribute 'org.jetbrains.kotlin.wasm.target' with value 'js' but:
       - Variant 'debugApiElements-published' capability moe.tlaster:precompose:1.5.4 declares a library for use during compile-time:
           - Incompatible because this component declares a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'androidJvm' and the consumer needed a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'debugRuntimeElements-published' capability moe.tlaster:precompose:1.5.4 declares a library for use during runtime:
           - Incompatible because this component declares a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'androidJvm' and the consumer needed a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'debugSourcesElements-published' capability moe.tlaster:precompose:1.5.4 declares a component for use during runtime:
           - Incompatible because this component declares documentation, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'androidJvm' and the consumer needed a library, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'iosArm64ApiElements-published' capability moe.tlaster:precompose:1.5.4 declares a library for use during 'kotlin-api':
           - Incompatible because this component declares a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native' and the consumer needed a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'iosArm64MetadataElements-published' capability moe.tlaster:precompose:1.5.4 declares a library:
           - Incompatible because this component declares a component for use during 'kotlin-metadata', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native' and the consumer needed a component for use during 'kotlin-api', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'iosArm64SourcesElements-published' capability moe.tlaster:precompose:1.5.4:
           - Incompatible because this component declares documentation for use during 'kotlin-runtime', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native' and the consumer needed a library for use during 'kotlin-api', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'iosSimulatorArm64ApiElements-published' capability moe.tlaster:precompose:1.5.4 declares a library for use during 'kotlin-api':
           - Incompatible because this component declares a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native' and the consumer needed a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'iosSimulatorArm64MetadataElements-published' capability moe.tlaster:precompose:1.5.4 declares a library:
           - Incompatible because this component declares a component for use during 'kotlin-metadata', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native' and the consumer needed a component for use during 'kotlin-api', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'iosSimulatorArm64SourcesElements-published' capability moe.tlaster:precompose:1.5.4:
           - Incompatible because this component declares documentation for use during 'kotlin-runtime', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native' and the consumer needed a library for use during 'kotlin-api', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'iosX64ApiElements-published' capability moe.tlaster:precompose:1.5.4 declares a library for use during 'kotlin-api':
           - Incompatible because this component declares a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native' and the consumer needed a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'iosX64MetadataElements-published' capability moe.tlaster:precompose:1.5.4 declares a library:
           - Incompatible because this component declares a component for use during 'kotlin-metadata', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native' and the consumer needed a component for use during 'kotlin-api', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'iosX64SourcesElements-published' capability moe.tlaster:precompose:1.5.4:
           - Incompatible because this component declares documentation for use during 'kotlin-runtime', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native' and the consumer needed a library for use during 'kotlin-api', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'jsApiElements-published' capability moe.tlaster:precompose:1.5.4 declares a library for use during 'kotlin-api':
           - Incompatible because this component declares a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'js' and the consumer needed a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'jsRuntimeElements-published' capability moe.tlaster:precompose:1.5.4 declares a library:
           - Incompatible because this component declares a component for use during 'kotlin-runtime', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'js' and the consumer needed a component for use during 'kotlin-api', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'jsSourcesElements-published' capability moe.tlaster:precompose:1.5.4:
           - Incompatible because this component declares documentation for use during 'kotlin-runtime', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'js' and the consumer needed a library for use during 'kotlin-api', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'jvmApiElements-published' capability moe.tlaster:precompose:1.5.4 declares a library for use during compile-time:
           - Incompatible because this component declares a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'jvm' and the consumer needed a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
               - Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
               - Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
       - Variant 'jvmRuntimeElements-published' capability moe.tlaster:precompose:1.5.4 declares a library for use during runtime:
           - Incompatible because this component declares a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'jvm' and the consumer needed a component, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm'
           - Other compatible attributes:
b

bashor

02/21/2024, 12:19 PM
I don’t know about clean error, but for application you nee to add
binaries.executable()
to
wasmJs
block https://github.com/Kotlin/kotlin-wasm-examples/blob/main/browser-example/build.gradle.kts#L17
a

Ahmad Hassan

02/21/2024, 12:20 PM
@bashor Already added!
b

bashor

02/21/2024, 12:21 PM
Copy code
Could not resolve moe.tlaster:precompose:1.5.4.
It looks like the library doesn’t have wasm-js support, at least this version
j

Javier

02/21/2024, 12:22 PM
That new error is unrelated to the
clean
one
a

Ahmad Hassan

02/21/2024, 12:59 PM
You are right, after changing wasm to JS, it's working now
@Javier do you have idea, how to create SQL driver for Kotlin/JS?
j

Javier

02/22/2024, 11:04 AM
No, check SqlDelight
a

Ahmad Hassan

02/22/2024, 12:33 PM
checked, it's not working
a

Arkadii Ivanov

02/23/2024, 8:50 PM
a

Ahmad Hassan

02/24/2024, 12:21 PM
Thanks for the input @Arkadii Ivanov I followed the docs. Facing the following error:
Copy code
Firstly this issue:

Module not found: Error: Can't resolve '@cashapp/sqldelight-sqljs-worker/sqljs.worker.js' in 'D:\My\Projects\KMP\MyNote\build\js\packages\myNote\kotlin'

Now this one, 
> Task :shared:jsBrowserDevelopmentRun
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: <http://localhost:8080/>
<i> [webpack-dev-server] On Your Network (IPv4): <http://192.168.14.82:8080/>
<i> [webpack-dev-server] Content not from webpack is served from 'kotlin, ..\..\..\..\shared\build\processedResources\js\main' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
33 Views