Cannot run on the wasmJs platform

[MoYeRanqianzhi]

No description provided.

[MoYeRanqianzhi]

Hello, I would like to ask when the wasmJs platform will be supported. I encountered an error when running on the wasmJs platform. The error message indicates that it cannot find the library for the js platform. Here is the error message:
Could not determine the dependencies of task ':kotlinNpmInstall'.

Could not resolve all dependencies for configuration ':composeApp:wasmJsNpmAggregated'.
Could not resolve io.github.kevinnzou:compose-webview-multiplatform:1.9.20.
Required by:
project :composeApp
> No matching variant of io.github.kevinnzou:compose-webview-multiplatform:1.9.20 was found. The consumer was configured to find a library for use during 'kotlin-runtime', preferably optimized for non-jvm, as well as attribute 'org.jetbrains.kotlin.js.public.package.json' with value 'public-package-json', attribute 'org.jetbrains.kotlin.platform.type' with value 'wasm', attribute 'org.jetbrains.kotlin.wasm.target' with value 'js' but:
- Variant 'desktopApiElements-published' declares a library:
- Incompatible because this component declares a component for use during compile-time, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'jvm' and the consumer needed a component for use during 'kotlin-runtime', 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'desktopRuntimeElements-published' 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:
- Doesn't say anything about its target Java environment (preferred optimized for non-jvm)
- Doesn't say anything about org.jetbrains.kotlin.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'desktopSourcesElements-published' declares a component for use during runtime:
- Incompatible because this component declares documentation, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'jvm' 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'iosArm64ApiElements-published' declares a library:
- Incompatible because this component declares a component for use during 'kotlin-api', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native' and the consumer needed a component for use during 'kotlin-runtime', 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'iosArm64MetadataElements-published' 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-runtime', 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'iosArm64SourcesElements-published' declares a component for use during 'kotlin-runtime':
- Incompatible because this component declares documentation, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native' 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'iosSimulatorArm64ApiElements-published' declares a library:
- Incompatible because this component declares a component for use during 'kotlin-api', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native' and the consumer needed a component for use during 'kotlin-runtime', 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'iosSimulatorArm64MetadataElements-published' 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-runtime', 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'iosSimulatorArm64SourcesElements-published' declares a component for use during 'kotlin-runtime':
- Incompatible because this component declares documentation, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native' 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'iosX64ApiElements-published' declares a library:
- Incompatible because this component declares a component for use during 'kotlin-api', as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native' and the consumer needed a component for use during 'kotlin-runtime', 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'iosX64MetadataElements-published' 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-runtime', 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'iosX64SourcesElements-published' declares a component for use during 'kotlin-runtime':
- Incompatible because this component declares documentation, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'native' 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'metadataApiElements' 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 'common' and the consumer needed a component for use during 'kotlin-runtime', 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'metadataSourcesElements' declares a component for use during 'kotlin-runtime':
- Incompatible because this component declares documentation, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'common' 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'releaseApiElements-published' declares a library:
- Incompatible because this component declares a component for use during compile-time, as well as attribute 'org.jetbrains.kotlin.platform.type' with value 'androidJvm' and the consumer needed a component for use during 'kotlin-runtime', 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'releaseRuntimeElements-published' 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')
- Variant 'releaseSourcesElements-published' 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.js.public.package.json (required 'public-package-json')
- Doesn't say anything about org.jetbrains.kotlin.wasm.target (required 'js')

• Try:

Review the variant matching algorithm at https://docs.gradle.org/8.7/userguide/variant_attributes.html#sec:abm_algorithm.
No matching variant errors are explained in more detail at https://docs.gradle.org/8.7/userguide/variant_model.html#sub:variant-no-match.
Run with --stacktrace option to get the stack trace.
Run with --info or --debug option to get more log output.
Run with --scan to get full insights.
Get more help at https://help.gradle.org.
Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.
You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.
For more on this, please refer to https://docs.gradle.org/8.7/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation.
BUILD FAILED in 7s

Translated by ChatGPT, it might not be perfect. Please forgive any mistakes.

[KevinnZou]

@MoYeRanqianzhi Thanks for your feedback. Currently, we only have a PR that has empty support for WasmJs. It just makes this lib build successfully on the WasmJs platform. However, the web content will not display properly on it. Since I am not an expert on the WasmJs side, I am afraid that we can only wait for someone to create the real implementation for it. I am sorry for that. You are welcome to build upon the PR above to support WasmJs. Thanks!

[MoYeRanqianzhi]

@KevinnZou Thank you, this way at least it won't cause the wasmJs platform to fail to run. For the implementation method on the wasmJs platform, I think maybe using the IFrame tag might work.

[MoYeRanqianzhi]

@KevinnZou I think this method can work. Just display the WebView at the top layer and adjust its position and size to make it appear at the specified location.

style.css

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;

    .over {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        z-index: 9999;
    }
    .over .component {
        pointer-events: auto;
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TinySoftware</title>
    <link type="text/css" rel="stylesheet" href="styles.css">
    <script type="application/javascript" src="composeApp.js"></script>
</head>
<body>
<div class="over" id="webview"></div>
</body>
</html>

main.kt

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    document.getElementById("webview")!!.appendChild(
        document.createElement("web").apply {
            innerHTML = "<iframe src=\"https://moyeranqianzhi.github.io\" width=\"500\" height=\"500\"></iframe>"
        }
    )
    ComposeViewport(document.body!!) {
        App()
    }
}