Hi, I created a simple web app with Kotlin/Wasm us...

# webassembly

[Jose Garcia]

Hi, I created a simple web app with Kotlin/Wasm using Compose multiplatform. The issue I’m experiencing comes when running the website on mobile device browsers. AFAIK Kotlin/Wasm doesn’t work on Safari browsers. However, some Android devices can run the web and some other Android devices experience a blank screen.

On my iOS device I get a blank screen on both Safari (as expected) and Google Chrome.

Is this normal? Do I have to add some configuration so that small screens can run my webapp?

[Svyatoslav Kuzmich [JB]]

Hi, it is expected. iOS version of Chrome and most other browsers use Safari’s Wasm engine.

[Jose Garcia]

Thank you, do you know what is the timeline for providing support to these browsers?

[Svyatoslav Kuzmich [JB]]

Safari hasn’t provided the timeline for new Wasm features, but it seems that they’re getting close to making them work.

[Jose Garcia]

Thank you 🙂

[Oliver.O]

Are you aware that you can use Kotlin/JS to run your Compose Web app in the meantime? What looks like this on Wasm

fun main() {
    CanvasBasedWindow("App Name") {
        // ...
    }
}

looks like this on JS

fun main() {
    onWasmReady {
        CanvasBasedWindow("App Name") {
            // ...
        }
    }
}

Apart from the above and configuring the build for a js target, no other changes to your app are required.

[Yogeshvu]

I think the documentation about ^ this is lacking in the compose multiplatform documentation… it as such appears that the compose-web is only wasm based and not js targeted

[Oliver.O]

That's true. You actually get more than what's marketed.

[Jose Garcia]

That’s great, I was trying to get a js target running compose before posting my message, but I wasn’t able. I think it had something to do with the name of my generated .js file. I will try again with onWAsmReady {}

[Yogeshvu]

@Oliver.O are there any github examples with the configuration you suggested?

[Oliver.O]

Possibly plenty. I have one but it’s not up to date: https://github.com/OliverO2/compose-counting-grid

[Oliver.O]

With current Kotlin versions you no longer need separate build configurations for JS and Wasm, so much easier now.

[Yogeshvu]

Thanks. Can you please elaborate on this ^

[Oliver.O]

I have just updated the project to the latest Kotlin and library releases. It now contains the simplified build configuration.

[Jose Garcia]

thank you @Oliver.O that was very helpful.

Now my web app works on Android phones using chrome and mozilla, and laptop using Safari,

However, it does not work on iOS (tried on safari and google chrome). Is this still normal behaviour for js targets?

[Oliver.O]

Just tried the JS target on an iPhone SE (3rd generation) on iOS 17.3.1 using Safari. It works as expected.

[Chris Athanas]

@Oliver.O GREAT WORK!

Wow, this is amazing! I simply added the jsMain target and it works on all my iOS devices and Safari now!

Everything works, but i’m seeing these error/warnings in the console, not sure what I need to do to add these NPM modules… or is there something else going on?

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }
Module not found: Error: Can't resolve 'path' in '/Volumes/TRS-83/Downloads/KotlinProject/build/js/packages/app/kotlin'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }

[Oliver.O]

Good to hear that it works for you. Regarding the webpack warnings, I did not notice anything like this before. Seems to be related to Kotlin's Multiplatform Gradle plugin upgrading to webpack 5. You might want to ask in #javascript or #webassembly, or log an issue on YouTrack.