I would like to use compose animations in my `wasm...

# webassembly

[Robert Jaros]

I would like to use compose animations in my wasmJs compose-runtime based application (not compose-web). I don't want nor need skiko and I have disabled unpacking it with compose {} dsl in gradle. But when adding compose.animation dependency I can't build my project with this error:

Module not found: Error: Can't resolve './skiko.mjs'

It works ok when I allow generation of skiko.wasm, but I don't want to load almost 9MB of unused code. The same project builds fine when targeting js (compose animations work fine without skiko).

[Oleksandr Karpovich [JB]]

hmm. compose:animation depends on compose:ui - https://github.com/JetBrains/compose-multiplatform-core/blob/jb-main/compose/animation/animation/build.gradle#L86

So it transitively depends on skiko too. And I assume that despite you don't call the skiko-involving functions, there're some exports/imports linkage which causes the error.

In skiko with k/js there is no skiko.mjs. I guess in js it still can fail if some skiko-involving function is called. (I'm not familiar with what are those functions)

Please report this as enhancement request in compose issue tracker - https://github.com/JetBrains/compose-multiplatform

[Robert Jaros]

A bit more information. I've used webpack.NormalModuleReplacementPlugin to replace skiko.mjs with some fake, empty module. It allowed me to build my app for both dev and prod, but the development version crashes with a runtime error import object field 'org_jetbrains_skia_Bitmap__1nMake' is not a Function. What's interesting, the production version (processed with binaryen) works fine.

[Robert Jaros]

I'll report an issue.

[Oleksandr Karpovich [JB]]

that actually makes sense. Your code doesn't use anything skiko-involving, so the exports/imports get removed I guess in release

[Robert Jaros]

https://github.com/JetBrains/compose-multiplatform/issues/4133

[Zac Sweers]

@Robert Jaros can you unpack the mentioned workarounds a bit more? I'm seeing this as well in some tests and struggling to find what the right resolution is

[Robert Jaros]

You need to have an empty module in the npm repository. I don't know if there are others, but I have my own module, so you can use it as well. You can add it as a dependency to your project, so it will be downloaded to node_modules directory.

implementation(npm("aaa-kilua-assets", "0.0.7"))

[Robert Jaros]

Then add skiko.js file to webpack.config.d directory with this content:

;(function(config) {
    const webpack = require('webpack');
    config.plugins.push(new webpack.NormalModuleReplacementPlugin(
        /^\.\/skiko.mjs$/,
        function(resource) { resource.request = "aaa-kilua-assets/index.js" }
    ));
})(config);

[Robert Jaros]

It should fix the Can't resolve './skiko.mjs' error

[Kazik Pogoda]

@Robert Jaros I am pinging this thread, since it's the only place on the internet pointing me to a fix I desperately needed. I was able to solve my problem according to your hints. In particular I did:

// src/jsMain/resources/skiko-stub.js
export const skikoApi = {
    _createLocalCallbackScope: function() {
        // Empty implementation
    },

    _releaseLocalCallbackScope: function() {
        // Empty implementation
    },

    _registerCallback: function(cb, data, global) {
        // Return default value
        return 0;
    }
};

And webpack.config.d/skiko.js :

;(function(config) {
    const webpack = require('webpack');
    const path = require('path');
    
    config.plugins.push(new webpack.NormalModuleReplacementPlugin(
        /^\.\/skiko.mjs$/,
        function(resource) {
            // Point to your own stub file instead
            resource.request = path.resolve(__dirname, 'kotlin/skiko-stub.js');
        }
    ));
})(config);

I have no intention of using skiko at all, but it seems that it is being pulled for compose HTML as a transitive dependency of:

implementation(libs.androidx.lifecycle.viewmodel.compose)
implementation(libs.koin.compose.viewmodel)
implementation(libs.androidx.navigation.componse)

It would work anyway, if not for the fact that the general js flavour for skiko refers to external JS files provided only with jsWasm. Thx a lot for all the hints!