https://kotlinlang.org logo
m

martmists

06/30/2023, 2:46 PM
I'm trying to look through the kotlin gradle plugin but can't find what task generates the .mjs files so I can use them in the build (as the generated my-project.js file errors with being unable to find the skia module). Would anyone know how I would set this up? Specifically, I'm looking for the
<module>.mjs
and
<module>.uninstantiated.mjs
files. The error I get is
Copy code
index-public.js:32 Uncaught (in promise) Error: Cannot find module 'skia'
    at index-public.js:32:11
    at async _importModule (public.uninstantiated.mjs:14:1)
    at async instantiate (public.uninstantiated.mjs:3894:1)
    at async eval (public.mjs:3:16)
with code
Copy code
<script type="application/javascript" src="static/js/skiko.js"></script>
        <script type="application/javascript" src="static/js/index-public.js"></script>
👍 1
a

Adam S

06/30/2023, 2:49 PM
which directories contain the .mjs files?
m

martmists

06/30/2023, 2:51 PM
build/compileSync/wasm/main/<typeExecutable/kotlin
. However, wasmExecutableDevelopmentCompileSync does not generate the .mjs files.
a

Adam S

06/30/2023, 2:54 PM
hmmm from the name I suspect that dir is populated from a generic task, which copies the output files from the actual tasks if you look in
build/tmp
are there any .mjs files?
m

martmists

06/30/2023, 2:56 PM
It seems to be produced in
build/js/packages/<module>/kotlin/<module>.mjs
. None in the temporary folders though.
a

Adam S

06/30/2023, 2:57 PM
try adding this:
Copy code
tasks.configureEach {

  val buildDir = project.layout.buildDirectory

  doLast {
    val mjsFiles = buildDir.get()
        .asFileTree
        .matching { include("**/*.mjs") }
        .files

    if (mjsFiles.isNotEmpty()) {
      println("build dir contains .mjs files after task:$path ran")
    }
  }
}
and then running
./gradlew clean assemble
It adds an additional action to each task that will check the build dir after each task, and if an .mjs file suddenly exists then it will log the task path. So if you check the logs then it should narrow down the options.
m

martmists

06/30/2023, 3:17 PM
Hmm, that did help solve the issue, but loading the mjs file instead errors with
Copy code
Uncaught TypeError: Failed to resolve module specifier 'skia'
a

Adam S

06/30/2023, 3:17 PM
ah nice, what was the name of the task?
m

martmists

06/30/2023, 3:18 PM
It ended up being
compile<type>ExecutableKotlinWasm
, which does raise concerns on how to accomplish this with multiple wasm modules in the multiplatform project.
Do you happen to know of a better way to load the distribution JS files "correctly"? as simply adding both to the <head> tag doesn't work.
a

Adam S

06/30/2023, 3:20 PM
what do you have at the moment?
I’ve got a Kotlin/JS project with this
src/jsMain/resources/index.html
. The Gradle subproject has a path of
:fca-components:fca-site
, but Kotlin only uses the name for the generated .js file https://youtrack.jetbrains.com/issue/KT-59700, so I import
fca-site.js
. There’s no
fca-site.js
file in the build dir (apparently
fca-site.js
is loaded from memory)
m

martmists

06/30/2023, 3:57 PM
ah, I guess I should've mentioned I'm using Compose for WASM
a

Adam S

06/30/2023, 5:58 PM
I picked that up from you mentioning Skiko :) But the principles for Kotlin/JS and Kotlin/WASM should be quite similar, I think
m

martmists

06/30/2023, 6:08 PM
Hmm, I wonder what the issue is then, since I provide and include both JS files and both WASM files
a

Adam S

06/30/2023, 6:09 PM
possibly it’s something to do with Webpack?
I remember seeing this ‘wasmLoading’ option, but I have no idea whether it’s relevant to Kotlin projects https://webpack.js.org/configuration/output/#outputwasmloading
and Skiko itself has some config for running Karma tests (but it’s beyond my comprehension!) https://github.com/JetBrains/skiko/blob/master/skiko/karma.config.d/wasm.js
m

martmists

07/02/2023, 10:14 AM
Unfortunately I haven't been able to figure this out 😞
12 Views