https://kotlinlang.org logo
Join Slack
Powered by
Hey! I’m looking to add wasmJs support to Coil but...
# webassembly
c
Hey! I’m looking to add wasmJs support to Coil but I’m running into this issue while building:
Copy code
* What went wrong:
Execution failed for task ':coil-core:wasmJsBrowserProductionWebpack'.
> Module not found: Error: Can't resolve './skiko.mjs' in '/Users/colinwhite/coil/build/js/packages/coil-root-coil-core-wasm-js/kotlin'
Any ideas what could be the root cause?
➕ 1
e
I ran into something similar and fixed it, but I don't remember exactly what it was 😢 If you want to poke through this branch where it works you might find some inspiration. You can run 
gradle :sample:webApp:wasmJsBrowserProductionWebpack
👀 1
🙏 1
o
Are you using 1.6.0-alpha01? It used to be an issue before, but should not happen with 1.6.0-alpha 01
c
Yep, I’m using Compose Multiplatform 1.6.0. This is the branch: https://github.com/coil-kt/coil/pull/1954
Oh I’m not applying the Compose Multiplatform plugin on the module that’s failing (
coil-core
) as it imports Skiko directly
Hmm applying the Compose Multiplatform compiler to that module doesn’t solve the issue either
o
Do you have this line in build.gradle.kte https://github.com/JetBrains/compose-multiplatform/blob/master/components/resources/demo/shared/build.gradle.kts#L90 ? It unpacks skiko into resources for web
e
It's possible this was the block that solved that
Copy code
val copyJsResources = tasks.create("copyJsResourcesWorkaround", Copy::class.java) {
  from(project(":sample").file("src/commonMain/resources"))
  into("build/processedResources/js/main")
}

val copyWasmResources = tasks.create("copyWasmResourcesWorkaround", Copy::class.java) {
  from(project(":sample").file("src/commonMain/resources"))
  into("build/processedResources/wasmJs/main")
}

afterEvaluate {
  tasks.withType(DefaultIncrementalSyncTask::class.java).configureEach {
    dependsOn(copyWasmResources)
  }

  project.tasks.getByName("jsProcessResources").finalizedBy(copyJsResources)
  project.tasks.getByName("wasmJsProcessResources").finalizedBy(copyWasmResources)
}
c
Thanks for the help! I managed to get it working! The only problem is I had to apply the Compose plugin to 
coil-core
to get past the 
skiko.mjs
error message. That module imports Skiko directly and doesn’t import Compose. It seems like the Compose compiler is creating or copying the 
skiko.mjs
file. Do you know where that logic is in the Compose compiler or do you have any tips so I can pull that functionality out of the plugin? Here’s the branch I’m working on for reference
o
c
Okay I was able to get it working with this file, but 
wasmJs
tests fail to run with:
Copy code
> Task :coil-core:wasmJsNodeTest FAILED
failed to asynchronously prepare wasm: both async and sync fetching of the wasm failed
Aborted(both async and sync fetching of the wasm failed)
file:///Users/colin/coil/build/js/packages/coil-root-coil-core-wasm-js-test/kotlin/skiko.mjs:8
wasmJsBrowserTest
fails with a similar error:
Copy code
> Task :coil-core:wasmJsBrowserTest FAILED
404: /absolute/var/folders/r7/hx_q4yfd2_74byltf8dqggb00000gn/T/_karma_webpack_631452/kotlin_skiko_mjs.js
  (error: /var/folders/r7/hx_q4yfd2_74byltf8dqggb00000gn/T/_karma_webpack_631452/kotlin_skiko_mjs.js)
      at __webpack_require__.f.j (/var/folders/r7/hx_q4yfd2_74byltf8dqggb00000gn/T/_karma_webpack_631452/runtime.js:292:29)
      at /var/folders/r7/hx_q4yfd2_74byltf8dqggb00000gn/T/_karma_webpack_631452/runtime.js:153:40
      at Array.reduce (<anonymous>)
      at __webpack_require__.e (/var/folders/r7/hx_q4yfd2_74byltf8dqggb00000gn/T/_karma_webpack_631452/runtime.js:152:67)
      at instantiate (/Users/colin/coil/build/js/packages/coil-root-coil-core-wasm-js-test/kotlin/coil-root-coil-core-wasm-js-test.uninstantiated.mjs:13:68 <- load.1401735528.js:5202:88)
      at /Users/colin/coil/build/js/packages/coil-root-coil-core-wasm-js-test/kotlin/coil-root-coil-core-wasm-js-test.mjs:3:34 <- load.1401735528.js:5170:170
      at __webpack_require__.a (/var/folders/r7/hx_q4yfd2_74byltf8dqggb00000gn/T/_karma_webpack_631452/runtime.js:83:13)
      at ./kotlin/coil-root-coil-core-wasm-js-test.mjs (load.1401735528.js:5162:21)
      at Function.__webpack_require__ (/var/folders/r7/hx_q4yfd2_74byltf8dqggb00000gn/T/_karma_webpack_631452/runtime.js:23:41)
If I apply the Compose plugin instead of the extracted script I get a different error:
Copy code
> Task :coil-core:wasmJsBrowserTest FAILED
Module not found: Error: Can't resolve './skiko.mjs' in '/Users/colin/coil/build/js/packages/coil-root-coil-core-wasm-js-test/kotlin'
  Error: Cannot find module './skiko.mjs'
      at webpackMissingModule (/Users/colin/coil/build/js/packages/coil-root-coil-core-wasm-js-test/kotlin/coil-root-coil-core-wasm-js-test.uninstantiated.mjs:13:68 <- load.1401735528.js:5202:133)
      at async instantiate (/Users/colin/coil/build/js/packages/coil-root-coil-core-wasm-js-test/kotlin/coil-root-coil-core-wasm-js-test.uninstantiated.mjs:13:1 <- load.1401735528.js:5202:62)
      at async /Users/colin/coil/build/js/packages/coil-root-coil-core-wasm-js-test/kotlin/coil-root-coil-core-wasm-js-test.mjs:3:16 <- load.1401735528.js:5170:67
o
We don't have a doc about CfW tests setup yet. Please have a look at our resources library: https://github.com/JetBrains/compose-multiplatform/tree/master/components/resources/library it has some tests for k/wasm target (commonTests) most likely the issue can be solved by adding karma.config.d - https://github.com/JetBrains/compose-multiplatform/tree/master/components/resources/library/karma.config.d/wasm also unpackSkiko task should add skiko.mjs for test compilation too - https://github.com/JetBrains/compose-multiplatform/blob/master/gradle-plugins/comp[…]xperimental/web/internal/configureExperimentalWebApplication.kt
👍 1
32 Views
Open in Slack
PreviousNext
Powered by