search

JetBrains / compose-multiplatform

Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.
https://jetbrains.com/lp/compose-multiplatform
Apache License 2.0
16.27k stars 1.18k forks source link

web : falling-balls-mpp : skiko.js is not created for the first `jsBrowserDistribution` run #2273

Closed theapache64 closed 1 month ago

theapache64 commented 2 years ago

Issue

When jsBrowserDistribution run for the first time, skiko.js is missing from the distributions directory, resulting in onWasmReady being undefined in the web console

Steps to reproduce

https://user-images.githubusercontent.com/9678279/187063755-8a35a2b8-a078-4426-8950-7c97ac721ced.mov

abueide commented 1 year ago

ahaha finally. spent hours trying to debug why my ci was getting different results than my local machine! thanks for opening the issue :)

aSemy commented 1 year ago

This is related to warnings in the Gradle build log:

> Task :jsApp:jsProcessResources
Execution optimizations have been disabled for task ':jsAppjsProcessResources' to ensure correctness due to the following reasons:
  - Gradle detected a problem with the following location: '.../build/compose/skiko-wasm/js'. Reason: Task ':jsApp:jsProcessResources' uses this output of task ':jsApp:unpackSkikoWasmRuntimeJs' without declaring an explicit or implicit dependency. This can lead to incorrect results being produced, depending on what order the tasks are executed. Please refer to https://docs.gradle.org/7.6/userguide/validation_problems.html#implicit_dependency for more details about this problem.
> Task :jsApp:jsBrowserDevelopmentRun
Execution optimizations have been disabled for task ':jsApp:jsBrowserDevelopmentRun' to ensure correctness due to the following reasons:
  - Gradle detected a problem with the following location: '.../kotlin/jb-compose-demo-common.js'. Reason: Task ':jsApp:jsBrowserDevelopmentRun' uses this output of task ':jsApp:jsDevelopmentExecutableCompileSync' without declaring an explicit or implicit dependency. This can lead to incorrect results being produced, depending on what order the tasks are executed. Please refer to https://docs.gradle.org/7.6/userguide/validation_problems.html#implicit_dependency for more details about this problem.

I fixed this by configuring the task dependencies:

// falling-balls-mpp/jsApp/build.gradle.kts

// fix warning: Task ':jsApp:jsProcessResources' uses this output of task ':common:unpackSkikoWasmRuntimeJs' ...
tasks.matching { it.name == "jsProcessResources" }.configureEach {
  inputs.dir(tasks.named<org.jetbrains.compose.experimental.web.tasks.ExperimentalUnpackSkikoWasmRuntimeTask>("unpackSkikoWasmRuntimeJs").map { it.outputDir })
}

// fix warning: Task ':jsApp:jsBrowserDevelopmentRun' uses this output of task ':common:jsDevelopmentExecutableCompileSync' ...
tasks.matching { it.name == "jsBrowserDevelopmentRun" }.configureEach {
  inputs.dir(tasks.named<Copy>("jsDevelopmentExecutableCompileSync").map { it.destinationDir })
}

The problem could be fixed if these task dependencies were set up by the JB Compose Gradle plugin.

shalva97 commented 1 year ago

Any update on this? I have exact same issue but on a project I created. Tried @aSemy's solution, the warnings from gradle are gone but there is still an error Uncaught ReferenceError: onWasmReady is not defined

shalva97 commented 1 year ago

I had a completely wrong html file

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello, Kotlin/JS!</title>
    <script src="skiko.js"> </script>
</head>
<body>
<div id="root"></div>
</body>
<script src="web2.js"></script>
</html>

Fixed it by replacing one from the falling balls example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>compose multiplatform web demo</title>
    <script src="skiko.js"> </script>
    <link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>compose multiplatform web demo</h1>
<div>
    <canvas id="ComposeTarget" width="800" height="600"></canvas>
</div>
<script src="web2.js"> </script>
</body>
</html>

and now it is working

okushnikov commented 2 months ago

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