jsBrowserDevelopmentRun task has been stuck at " w...

# javascript

[Chrys]

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: /

[Chrys]

deleting lock file doesn't help much

[Chrimaeon]

The task will not finish as is starts the development server from webpack.
Just open the URL in a browser.

[Chrys]

noting shows up in the brwser. Page is blank

[Chrimaeon]

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 😅

[Chrys]

makes sense, thanks. What config could help?

[Chrimaeon]

Your build.gradle files.

[Chrimaeon]

also you can have a look here for a correctly setup project.
https://github.com/chrimaeon/curriculumvitae

[Chrys]

funny thing is this setup worked this morning. Tnaks for the pointer, I'll have a look a adjust if needed

[Chrys]

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:

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")
            }
        }
    }
}

[Artem Kobzar]

@Ilya Goncharov [JB] ^^
What could it be?

[Chrys]

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.

(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']);
  }

[Chrys]

That lead nowhere

[Chrys]

this Main.kt content fails and shows the error about react-dom/client :

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:

import web.dom.document

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

[Artem Kobzar]

What version of multiplatform plugin do you use?

[Chrys]

1.9.10

[Artem Kobzar]

Does it work with 1.8.20?

[Chrys]

I'll try and get back to you

[Chrys]

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!