[web] Default project still not working

[aquagray]

Describe the bug Downloaded the default project for web app, and it crashes.

Affected platforms

• Web (K/Wasm) - Canvas based API

Versions

• Kotlin version*: "1.9.22"
• Compose Multiplatform version*: version.ref = "kotlin"
• OS version(s)* (required for Desktop and iOS issues): Sonoma 14.3.1
• OS architecture (x86 or arm64): Apple m1 pro
• Device (model or simulator for iOS issues): Chrome browser (122.0.6261.94)

To Reproduce Steps and/or the code snippet to reproduce the behavior:

https://kmp.jetbrains.com/ Download "web" project Open using latest intellij "community edition 2023.3.4"

Expected behavior default web app works.

Screenshots

From ide:

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'kotlin, ../../../../composeApp/build/processedResources/wasmJs/main, /Users/ichai/IdeaProjects/webtest1/composeApp' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
node:events:491
      throw er; // Unhandled 'error' event
      ^

RangeError: Invalid WebSocket frame: RSV1 must be clear
RangeError: Invalid WebSocket frame: RSV1 must be clear
    at Receiver.getInfo (/Users/ichai/IdeaProjects/webtest1/build/js/node_modules/webpack-dev-server/node_modules/ws/lib/receiver.js:213:26)
    at Receiver.startLoop (/Users/ichai/IdeaProjects/webtest1/build/js/node_modules/webpack-dev-server/node_modules/ws/lib/receiver.js:159:16)
    at Receiver._write (/Users/ichai/IdeaProjects/webtest1/build/js/node_modules/webpack-dev-server/node_modules/ws/lib/receiver.js:98:10)
    at writeOrBuffer (node:internal/streams/writable:392:12)
    at _write (node:internal/streams/writable:333:10)
    at Writable.write (node:internal/streams/writable:337:10)
    at Socket.socketOnData (/Users/ichai/IdeaProjects/webtest1/build/js/node_modules/webpack-dev-server/node_modules/ws/lib/websocket.js:1303:35)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
Emitted 'error' event on WebSocket instance at:
Emitted 'error' event on WebSocket instance at:
    at Receiver.receiverOnError (/Users/ichai/IdeaProjects/webtest1/build/js/node_modules/webpack-dev-server/node_modules/ws/lib/websocket.js:1189:13)
    at Receiver.emit (node:events:513:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  code: 'WS_ERR_UNEXPECTED_RSV_1',
  [Symbol(status-code)]: 1002
}

Node.js v18.12.1

From browser:

ERROR
Unexpected non-Kotlin exception TypeError: Failed to fetch
Error
    at kotlin.captureStackTrace (webpack-internal:///./kotlin/composeApp.uninstantiated.mjs:20:44)
    at <webtest1:composeApp>.kotlin.captureStackTrace__externalAdapter (http://localhost:8080/composeApp.wasm:wasm-function[11460]:0x246075)
    at <webtest1:composeApp>.kotlin.Throwable.<init> (http://localhost:8080/composeApp.wasm:wasm-function[11447]:0x245e94)
    at <webtest1:composeApp>.kotlin.Throwable.<init> (http://localhost:8080/composeApp.wasm:wasm-function[11450]:0x245f09)
    at <webtest1:composeApp>.kotlin.Exception.<init> (http://localhost:8080/composeApp.wasm:wasm-function[10827]:0x23a4cd)
    at <webtest1:composeApp>.kotlin.RuntimeException.<init> (http://localhost:8080/composeApp.wasm:wasm-function[10817]:0x23a2f9)
    at <webtest1:composeApp>.kotlin.IllegalStateException.<init> (http://localhost:8080/composeApp.wasm:wasm-function[10832]:0x23a5b7)
    at <webtest1:composeApp>.kotlinx.coroutines.await$lambda.invoke (http://localhost:8080/composeApp.wasm:wasm-function[18989]:0x2d1152)
    at <webtest1:composeApp>.kotlinx.coroutines.await$lambda.invoke (http://localhost:8080/composeApp.wasm:wasm-function[18990]:0x2d11ba)
    at <webtest1:composeApp>.kotlin.js.__callFunction_((Js)->Js?) (http://localhost:8080/composeApp.wasm:wasm-function[11550]:0x246d01)

Additional context

[agentdalecoper]

+1

[Nek-12]

And does anyone know how a workaround to get wasm working in any form? Should we not use wasm at all until this is fixed?

Update: Nevermind, found a workaround. 8080 port is bound by some other executable on Mac.

Using any other port works:

 browser {
            commonWebpackConfig {
                outputFileName = "composeApp.js"
                devServer = (devServer ?: KotlinWebpackConfig.DevServer(port = 8081)) // <- here
            }
        }

UPD2: NVM still crashes, just not at the start

[toasterofbread]

I'm experiencing a similar (though not identical, sorry if this is in the wrong place) issue with my own project. This occurs specifically when loading it in an Android Chromium webview, it works fine in Firefox/Chrom(ium) on both Linux and Android. Nothing is outputted by the wasmJsRun task.

Edit: Never mind, further testing showed that that really was just an info log. There was something wrong with my webview implementation that prevented it from displaying the Compose project. With a separate implementation that did allow it to display, the same error was still outputted so it seems to be unrelated.

04-25 01:01:21.926 14706 14706 I chromium: [INFO:CONSOLE(124)] "Error: Fail to fetch
04-25 01:01:21.926 14706 14706 I chromium:     at kotlin.captureStackTrace (webpack-internal:///./kotlin/slai.uninstantiated.mjs:21:44)
04-25 01:01:21.926 14706 14706 I chromium:     at <slai:shared>.kotlin.captureStackTrace__externalAdapter (http://192.168.123.122:8080/slai.wasm:wasm-function[13077]:0x3b98e3)
04-25 01:01:21.926 14706 14706 I chromium:     at <slai:shared>.kotlin.Throwable.<init> (http://192.168.123.122:8080/slai.wasm:wasm-function[13064]:0x3b9702)
04-25 01:01:21.926 14706 14706 I chromium:     at <slai:shared>.kotlin.Error.<init> (http://192.168.123.122:8080/slai.wasm:wasm-function[12429]:0x3ad6aa)
04-25 01:01:21.926 14706 14706 I chromium:     at <slai:shared>.io.ktor.client.engine.js.compatibility.commonFetch$lambda.invoke (http://192.168.123.122:8080/slai.wasm:wasm-function[80507]:0x79d59d)
04-25 01:01:21.926 14706 14706 I chromium:     at <slai:shared>.io.ktor.client.engine.js.compatibility.commonFetch$lambda.invoke (http://192.168.123.122:8080/slai.wasm:wasm-function[80508]:0x79d5e3)
04-25 01:01:21.926 14706 14706 I chromium:     at <slai:shared>.kotlin.js.__callFunction_((Js)->Js?) (http://192.168.123.122:8080/slai.wasm:wasm-function[13167]:0x3ba57a)
04-25 01:01:21.926 14706 14706 I chromium:     at eval (webpack-internal:///./kotlin/slai.uninstantiated.mjs:143:125)
04-25 01:01:21.926 14706 14706 I chromium: Caused by: JsError: Error from javascript[TypeError: Failed to fetch].
04-25 01:01:21.926 14706 14706 I chromium:     at kotlin.captureStackTrace (webpack-internal:///./kotlin/slai.uninstantiated.mjs:21:44)
04-25 01:01:21.926 14706 14706 I chromium:     at <slai:shared>.kotlin.captureStackTrace__externalAdapter (http://192.168.123.122:8080/slai.wasm:wasm-function[13077]:0x3b98e3)
04-25 01:01:21.926 14706 14706 I chromium:     at <slai:shared>.kotlin.Throwable.<init> (http://192.168.123.122:8080/slai.wasm:wasm-function[13064]:0x3b9702)
04-25 01:01:21.926 14706 14706 I chromium:     at <slai:shared>.kotlin.Throwable.<init> (http://192.168.123.122:8080/slai.wasm:wasm-function[13067]:0x3b9777)
04-25 01:01:21.926 14706 14706 I chromium:     at <slai:shared>.io.ktor.client.engine.js.JsError.<init> (http://192.168.123.122:8080/slai.wasm:wasm-function[80458]:0x79c205)
04-25 01:01:21.926 14706 14706 I chromium:     at <slai:shared>.io.ktor.client.engine.js.compatibility.commonFetch$lambda.invoke (http://192.168.123.122:8080/slai.wasm:wasm-function[80507]:0x79d599)
04-25 01:01:21.926 14706 14706 I chromium:     at <slai:shared>.io.ktor.client.engine.js.compatibility.commonFetch$lambda.invoke (http://192.168.123.122:8080/slai.wasm:wasm-function[80508]:0x79d5e3)
04-25 01:01:21.926 14706 14706 I chromium:     ... and 2 more common stack frames skipped
04-25 01:01:21.926 14706 14706 I chromium: ", source: webpack-internal:///./kotlin/slai.uninstantiated.mjs (124)

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.