Hello everyone, anyone having problem with js buil...

# javascript

[Pavel Janečka]

Hello everyone, anyone having problem with js build location with kotlin multiplatform project?

I have KMP that has following `build.gradle.kts`in commonMain for the js target

js(LEGACY) {
    browser {
        binaries.executable()
        webpackTask {
            cssSupport.enabled = true
        }
    }
}

and if I run the `jsBrowserDevelopmentRun`task (in project root) the started webpack-dev-server serves from
<project-root>/mainModule/build/processedResources/js/main/ path, but the actual build is located at
<project-root>/build/js/packages/<project-name>-mainModule/kotlin-dce-dev/<project-name>-mainModule.js
how can I get to the build fil in my index.html then (located in <project-root>/mainModule/src/jsMain/resources/index.html)?

Even if I hardcode relative path to the build file, the dev server won't serve it (I guess it's forbidden to go up from serve path - for security reasons - by default).

[Pavel Janečka]

After lots of debugging I found that the proper way is to put <script src="mainModule.js"></script> in my HTML. Can someone explain me why is that?

[turansky]

proper way is to put <script src="mainModule.js"></script> in my HTML. Can someone explain me why is that?

And what was before? Html file without script?

[Pavel Janečka]

I'm not sure, I used IDEA wizard to generate the project. There was definitely some script tag, but I've changed the JS file in it at some point because the final build file name (when you run "gradle build" command) is "<project-name>-mainModule.js" so it didn't work.

[turansky]

After build you can check build/distributions folder. It will contains file with “webpack” name

[turansky]

You can define moduleName in js block to sync “Kotlin” and “Webpack” names

[Pavel Janečka]

I tried the module name, but the dev build (`jsBrowserDevelopmentWebpack`gradle task) and the production build (`build`gradle task) has different JS file names anyway..
I was able to solve it by configuring the outputFileName in commonWebpackConfig instead of `webpackTask`like this

kotlin {
    js(LEGACY) {
        browser {
            binaries.executable()
            webpackTask {
                cssSupport.enabled = true
            }
            commonWebpackConfig {
                outputFileName = "<my-selected-name>.js"
            }
        }
    }
}

Thanks for the help! 👍

[Cheick Kante]

Hey how do you set up weback or gradle to dev mode in a Multiplatform project, jvm server + kotlin/js + react client ?

Assigning Mode.Development in CommonWebpackConfig still build the clientBrowserProduction task instead of the clientBrowserDevelopment task