Trying to create a `Js` fallback for a `WasmJs` project so t kotlinlang #multiplatform

Trying to create a `Js` fallback for a `WasmJs` pr...

Valeriy O.

01/11/2025, 5:34 PM

Trying to create a

Js

fallback for a

WasmJs

project, so that it works in Safari... There is some outdated info on the Web on how to do it, but right now I'm stuck, and help is needed. Here is what I did: 1. Created a Web (Wasm) project on https://kmp.jetbrains.com/ 2. Loaded it in Android Studio, ran via

./gradlew :composeApp:wasmJsBrowserDevelopmentRun

-- works fine in Chrome 3. In

composeApp/build.gradle.kts

added (inside

kotlin

block):

Copy code

js(IR) {
        browser()
        binaries.executable()
    }

and copied

src/wasmJsMain

src/jsMain

. 4. Then,

./gradlew :composeApp:jsBrowserDevelopmentRun

complained, so I added in

gradle-properties

Copy code

org.jetbrains.compose.experimental.jscanvas.enabled=true

5. Then,

./gradlew :composeApp:jsBrowserDevelopmentRun

runs, but Chrome shows a blank page, and Dev Tools console shows errors:

Copy code

Uncaught > NullPointerException
    Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
    Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

6. At this point, I tried different things I found on the internet, but nothing got me to a working state.... Is there a public Js/WasmJs composeApp project that I can use for reference?

Valeriy O.

01/11/2025, 5:42 PM

I also saw just now that Safari 18.2 just came out today with Wasm support, but I still need the fallback... for MacOS and iPhones

PHondogo

01/11/2025, 5:45 PM

https://github.com/JetBrains/kotlinconf-app/blob/f7a148eb148376d6b4b7a8f2b10187074c559d46/shared/src/webMain/resources/index.html#L197

Valeriy O.

01/11/2025, 11:25 PM

With these in the

<body>...</body>

Copy code

<script type="application/javascript" src="skiko.js"></script>
<script type="application/javascript" src="composeApp.js"></script>

I'm getting:

Copy code

Uncaught TypeError: org_jetbrains_skia_Paint__1nMake is not a function

which doesn't have much info on the web

Valeriy O.

01/11/2025, 11:39 PM

Oh. weird... Now it seems to work.

Valeriy O.

01/11/2025, 11:39 PM

In my "real" project though, I'm getting this error printed in a semi-transparent overlay over my app:

Copy code

Invalid regular expression: /[a-zA-Z0-9\+\.\_\%\-\+]{1,256}\@[a-zA-Z0-9][a-zA-Z0-9\-]{0,64}(\.[a-zA-Z0-9][a-zA-Z0-9\-]{0,25})+/gu: Invalid escape
SyntaxError: Invalid regular expression: /[a-zA-Z0-9\+\.\_\%\-\+]{1,256}\@[a-zA-Z0-9][a-zA-Z0-9\-]{0,64}(\.[a-zA-Z0-9][a-zA-Z0-9\-]{0,25})+/gu: Invalid escape
    at new RegExp (<anonymous>)
    at Regex (webpack-internal:///./kotlin/kotlin-kotlin-stdlib.js:14736:28)
    at Regex_init_$Init$_0 (webpack-internal:///./kotlin/kotlin-kotlin-stdlib.js:14513:11)
    at Regex_init_$Create$_0 (webpack-internal:///./kotlin/kotlin-kotlin-stdlib.js:14517:12)
    at _init_properties_Strings_kt__76obio (webpack-internal:///./kotlin/megachat-shared-base.js:1539:23)
    at splitWords (webpack-internal:///./kotlin/megachat-shared-base.js:1495:5)
    at Initials (webpack-internal:///./kotlin/megachat-client-ui-design.js:9849:63)
    at eval (webpack-internal:///./kotlin/megachat-client-ui-design.js:10049:11)
    at protoOf.invoke_c9vvnb_k$ (webpack-internal:///./kotlin/compose-multiplatform-core-compose-runtime-runtime.js:40152:92)
    at eval (webpack-internal:///./kotlin/megachat-client-ui-design.js:10074:25)

Seems like a kotlin stdlib problem

Valeriy O.

01/12/2025, 2:11 AM

The "Invalid regular expression" shows up in dev mode only. I got JS fallback to work 🙂 Thank you @PHondogo for the pointer, much appreciated!

Valeriy O.

01/12/2025, 6:22 AM

Actually, in my "real" webapp, I'm hitting

Copy code

Uncaught TypeError: Module["org_jetbrains_skia_Paint__1nMake"] is not a function

Valeriy O.

01/12/2025, 4:51 PM

Any clue why this exception occurs in Js ?

Copy code

Module["org_jetbrains_skia_Paint__1nMake"] is not a function
Module.org_jetbrains_skia_Paint__1nMake@http://localhost:8080/skiko.js:1:370158
Paint_init_$Init$_0@webpack-internal:///./kotlin/skiko-kjs.js:9831:25
Paint_init_$Create$_0@webpack-internal:///./kotlin/skiko-kjs.js:9837:12
SkiaBackedPaint@webpack-internal:///./kotlin/compose-multiplatform-core-compose-ui-ui-graphics.js:11848:28
Paint_0@webpack-internal:///./kotlin/compose-multiplatform-core-compose-ui-ui-graphics.js:11822:12
Companion_20@webpack-internal:///./kotlin/compose-multiplatform-core-compose-ui-ui.js:25380:18
Companion_getInstance_45@webpack-internal:///./kotlin/compose-multiplatform-core-compose-ui-ui.js:25393:7
InnerNodeCoordinator@webpack-internal:///./kotlin/compose-multiplatform-core-compose-ui-ui.js:25397:5
NodeChain@webpack-internal:///./kotlin/compose-multiplatform-core-compose-ui-ui.js:35023:31
LayoutNode@webpack-internal:///./kotlin/compose-multiplatform-core-compose-ui-ui.js:27277:20
OwnerImpl@webpack-internal:///./kotlin/compose-multiplatform-core-compose-ui-ui.js:47202:18
RootNodeOwner@webpack-internal:///./kotlin/compose-multiplatform-core-compose-ui-ui.js:47599:20
CanvasLayersComposeSceneImpl@webpack-internal:///./kotlin/compose-multiplatform-core-compose-ui-ui.js:51573:24
CanvasLayersComposeScene@webpack-internal:///./kotlin/compose-multiplatform-core-compose-ui-ui.js:50787:12
ComposeWindow@webpack-internal:///./kotlin/compose-multiplatform-core-compose-ui-ui.js:55567:21
ComposeViewport@webpack-internal:///./kotlin/compose-multiplatform-core-compose-ui-ui.js:54849:5

The definition is in

org.jetbrains.skia.Paint.kt

Copy code

@ExternalSymbolName("org_jetbrains_skia_Paint__1nMake")
@ModuleImport("./skiko.mjs", "org_jetbrains_skia_Paint__1nMake")
private external fun Paint_nMake(): NativePointer

🧵 2

Michael Paus

01/12/2025, 6:12 PM

I also saw just now that Safari 18.2 just came out today with Wasm support, but I still need the fallback... for MacOS and iPhones

Safari on MacOS has already been updated to 18.2 last year. Don’t know about the status for iPhones though.

Valeriy O.

01/12/2025, 7:57 PM

Right... I got the 18.2 too after upgrading MacOS, which confused me at first, because things started to work all of a sudden. iPhone is still in a bad shape, unfortunately.

Valeriy O.

01/12/2025, 7:59 PM

The problem with KMP/JS and

org_jetbrains_skia_Paint__1nMake

is weird, because the sample project loads fine initially, but fails after browser refresh consistently. After complete refresh (with a Shift pressed) - it loads fine again. So, there is some kind of cache-related issue that causes this error.

Valeriy O.

01/12/2025, 8:04 PM

Screen_Recording_iPhone.mov

Valeriy O.

01/12/2025, 8:05 PM

image.png

Artem Kobzar

01/13/2025, 12:04 PM

@Oleksandr Karpovich [JB] ^^

Oleksandr Karpovich [JB]

01/13/2025, 1:02 PM

src/jsMain entry point is a bit different than for k/wasm: https://github.com/JetBrains/compose-multiplatform-core/blob/jb-main/compose/mpp/demo/src/jsMain/kotlin/androidx/compose/mpp/demo/main.js.kt#L16 you need to add your code inside of onWasmReady {...}

Valeriy O.

01/13/2025, 7:29 PM

@Oleksandr Karpovich [JB] adding

onWasmReady

fixed the refresh/loading error - thank you very much!

👍 2

67 Views

Open in Slack

Previous Next