https://kotlinlang.org logo
#javascript
Title
# javascript
c

Chrys

09/06/2023, 3:46 PM
jsBrowserDevelopmentRun task has been stuck at " wait until bundle finish /" for 30 minutes. Is that an expected behaviour? :
> Task :client:web:jsBrowserDevelopmentRun
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: <http://localhost:8081/>
<i> [webpack-dev-server] On Your Network (IPv4): <http://192.168.1.8:8081/>
<i> [webpack-dev-server] Content not from webpack is served from 'kotlin, ..\..\..\..\client\web\build\processedResources\js\main' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
deleting lock file doesn't help much
c

Chrimaeon

09/06/2023, 3:58 PM
The task will not finish as is starts the development server from webpack. Just open the URL in a browser.
c

Chrys

09/06/2023, 3:59 PM
noting shows up in the brwser. Page is blank
c

Chrimaeon

09/06/2023, 4:01 PM
Then it’s hard to tell without seeing any of your configuration. But coming back to your initial question, no, it not expected to “wait” for 30 minutes 😅
c

Chrys

09/06/2023, 4:02 PM
makes sense, thanks. What config could help?
c

Chrimaeon

09/06/2023, 4:04 PM
Your
build.gradle
files.
also you can have a look here for a correctly setup project. https://github.com/chrimaeon/curriculumvitae
c

Chrys

09/06/2023, 4:05 PM
funny thing is this setup worked this morning. Tnaks for the pointer, I'll have a look a adjust if needed
turns out there's a console error saying:
customer-portal-web.js:8 Uncaught Error: Error loading module 'customer-portal-web'. Its dependency 'react-dom/client' was not found. Please, check whether 'react-dom/client' is loaded prior to 'customer-portal-web'.
which is curious, given that react-dom/client comes with react-dom dependency:
Copy code
plugins {
    alias(libs.plugins.kotlin.multiplatform)
    alias(libs.plugins.kotlin.serialization)
}

val kotlinWrappersVersion = "1.0.0-pre.623"

kotlin {
    js(IR) {
        binaries.executable()
        browser {
            // see <https://youtrack.jetbrains.com/issue/KTIJ-26086>
            @Suppress("DEPRECATION")
            commonWebpackConfig {
                cssSupport {
                    enabled.set(true)
                }
            }
        }
    }
    sourceSets {
        val jsMain by getting {
            dependencies {
                implementation(project(":shared"))
                implementation(kotlin("stdlib-js"))
                implementation(enforcedPlatform("org.jetbrains.kotlin-wrappers:kotlin-wrappers-bom:$kotlinWrappersVersion"))
                implementation("org.jetbrains.kotlin-wrappers:kotlin-react")
                implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom")
                implementation("org.jetbrains.kotlin-wrappers:kotlin-emotion")
                implementation("org.jetbrains.kotlin-wrappers:kotlin-mui")
            }
        }
    }
}
a

Artem Kobzar

09/07/2023, 11:18 AM
@Ilya Goncharov [JB] ^^ What could it be?
c

Chrys

09/07/2023, 1:11 PM
I inspected the content of the generated JS file. The error is yield after checks on "define" and "exports" types fail. As per the docs, the default browser target is umd. I'm not sure if that's heading us in the right direction. Will change module type and observe.
Copy code
(function (root, factory) {
  if (typeof define === 'function' && define.amd)
    define(['exports', 'react-dom/client', '@emotion/css', 'react', './kotlin-kotlin-stdlib-js-ir.js', './kotlin-wrappers-kotlin-react-js-ir.js', './kotlin-wrappers-kotlin-react-dom-js-ir.js'], factory);
  else if (typeof exports === 'object')
    factory(module.exports, require('react-dom/client'), require('@emotion/css'), require('react'), require('./kotlin-kotlin-stdlib-js-ir.js'), require('./kotlin-wrappers-kotlin-react-js-ir.js'), require('./kotlin-wrappers-kotlin-react-dom-js-ir.js'));
  else {
    if (typeof this['react-dom/client'] === 'undefined') {
      throw new Error("Error loading module 'customer-portal-web'. Its dependency 'react-dom/client' was not found. Please, check whether 'react-dom/client' is loaded prior to 'customer-portal-web'.");
    }
    if (typeof this['@emotion/css'] === 'undefined') {
      throw new Error("Error loading module 'customer-portal-web'. Its dependency '@emotion/css' was not found. Please, check whether '@emotion/css' is loaded prior to 'customer-portal-web'.");
    }
    if (typeof react === 'undefined') {
      throw new Error("Error loading module 'customer-portal-web'. Its dependency 'react' was not found. Please, check whether 'react' is loaded prior to 'customer-portal-web'.");
    }
    if (typeof this['kotlin-kotlin-stdlib-js-ir'] === 'undefined') {
      throw new Error("Error loading module 'customer-portal-web'. Its dependency 'kotlin-kotlin-stdlib-js-ir' was not found. Please, check whether 'kotlin-kotlin-stdlib-js-ir' is loaded prior to 'customer-portal-web'.");
    }
    if (typeof this['kotlin-wrappers-kotlin-react-js-ir'] === 'undefined') {
      throw new Error("Error loading module 'customer-portal-web'. Its dependency 'kotlin-wrappers-kotlin-react-js-ir' was not found. Please, check whether 'kotlin-wrappers-kotlin-react-js-ir' is loaded prior to 'customer-portal-web'.");
    }
    if (typeof this['kotlin-wrappers-kotlin-react-dom-js-ir'] === 'undefined') {
      throw new Error("Error loading module 'customer-portal-web'. Its dependency 'kotlin-wrappers-kotlin-react-dom-js-ir' was not found. Please, check whether 'kotlin-wrappers-kotlin-react-dom-js-ir' is loaded prior to 'customer-portal-web'.");
    }
    root['customer-portal-web'] = factory(typeof this['customer-portal-web'] === 'undefined' ? {} : this['customer-portal-web'], this['react-dom/client'], this['@emotion/css'], react, this['kotlin-kotlin-stdlib-js-ir'], this['kotlin-wrappers-kotlin-react-js-ir'], this['kotlin-wrappers-kotlin-react-dom-js-ir']);
  }
That lead nowhere
this Main.kt content fails and shows the error about react-dom/client :
Copy code
import react.create
import react.dom.client.createRoot
import react.dom.html.ReactHTML.div
import web.dom.document


fun main() {

    val container = document.getElementById("root") ?: error("Couldn't find root container!")
    val page = div.create {
        +"Hello World from div"
    }
    createRoot(container).render(page)
}
but this one works and prints the message:
Copy code
import web.dom.document

fun main() {
    document.getElementById("root")?.innerHTML = "Hello, Kotlin/JS!"
}
a

Artem Kobzar

09/07/2023, 3:07 PM
What version of multiplatform plugin do you use?
c

Chrys

09/07/2023, 3:27 PM
1.9.10
a

Artem Kobzar

09/07/2023, 3:28 PM
Does it work with 1.8.20?
c

Chrys

09/07/2023, 3:34 PM
I'll try and get back to you
still had the issue. I updated the js file name from customer-portal-web.js to web.js and it was solved. I was initially under the impression the the webpack output file would be <root-project-name>-<sub-module-name>.js until I inspected the webpack config. In hope it helps someone. Thanks everyone!
K 1
thank you color 1
11 Views