:bulb: Regarding the default configuration of webp...

# javascript

[Oliver.O]

💡 Regarding the default configuration of webpack in K/Js:

Currently, outputFileName defaults to the project name. This means copy/pasted index.html files usually fail. Renaming the project will also make loading the bundle fail. In both cases, one might be unaware of that webpack configuration.

Making webpack default to a fixed name like outputFileName = "app.js" would eliminate these kinds of problems. What do you think?

[andylamax]

While that's a generally good idea, not everyone uses kotlin/js to build apps, some of us uses kotlin/js to build libraries and sdks, so using an "app.js" output name is not convenient at all for a library

[Oliver.O]

OK, I was not aware that this is used for a library, too (I do the above configuration for executables only, so I just did not notice). If so, good point!

[Oliver.O]

Here's an example of the confusion that can occur, in particular since webpack devServer creates that "file" name in memory only: KT-59700

[turansky]

You can use moduleName property to fix output file name

[turansky]

kotlin.js {
    moduleName = "my-app"
}

[Oliver.O]

Thanks for the hint! Any thoughts about having K/Js defaulting to a fixed name, at least for executables?

[turansky]

It doesn’t work if you have > 1 executables

[Adam S]

good to hear I’m not the only one who gets confused @Oliver.O :).

I was particularly confused because I thought I would check the compiled files in build/ to try and figure out what filename to use in my index.html. Since I didn’t see my-subproject-name.js, I assumed that I should use the closest name available, which was incorrect, and led to a confusing error.

I have a few thoughts on trying to make it less confusing:

1. KGP logs the correct filename to use in index.html, e.g. “Kotlin/JS compiled module my-subproject-name.js”

pro: the name is visible
con: it’s still easy to forget/ignore/confuse, and it’s noisy

2. KGP adds a check - if index.html doesn’t contain my-subproject-name.js then it logs a warning

pro: catches problems early
con: noisy, could be annoying, additional KGP code to write/maintain,

3. add a find/replace in the Gradle task that copies index.html, and use a token to replace {kotlinJsModule} with the actual module name

pro: Just Works™
con: needs additional KGP code, requires some docs

[Oliver.O]

@Adam S I was in the exact same situation that you were describing in the issue after renaming a project, where everything had been working for a long time, so I had already forgotten the mechanics behind the scenes. I also tried the names of the files I found in the build directory and was wondering why webpack seemingly had not initialized the module system.

[Adam S]

Option 3: in theory this could be done with the following config, but unfortunately I can’t use kotlin.js().moduleName to get the default module name - it just returns ‘undefined’

// build.gradle.kts

tasks.jsProcessResources {
  val kotlinJsModuleName = provider { kotlin.js().moduleName }
  inputs.property("kotlinJsModuleName", kotlinJsModuleName)
  expand(
    "kotlinJsModuleName" to kotlinJsModuleName
  )
}

[Adam S]

Option 3 works with these workarounds:

kotlin {
  js(IR) {
    moduleName = project.name
  }
}

tasks.jsProcessResources {
  val kotlinJsModuleName = provider { kotlin.js().moduleName + ".js" }
  inputs.property("kotlinJsModuleName", kotlinJsModuleName)

  eachFile { 
    if (file.name == "index.html") {
      // replace `kotlinJsModuleName.get()` with `kotlinJsModuleName` when 
      // <https://github.com/gradle/gradle/issues/24268> is fixed
      expand("kotlinJsModuleName" to kotlinJsModuleName.get())
    }
  }
}

This correctly replaces

<script src="${kotlinJsModuleName}"></script>

with

<script src="my-subproject.js"></script>

[Adam S]

https://youtrack.jetbrains.com/issue/KT-60569/Kotlin-JS-Kotlin-Gradle-Plugin-simplify-configuring-the-module-JS-file-name-in-index.html

[Oliver.O]

This is an interesting proposal, which I would fully support if a fixed name won't do. I'd like to dig a bit deeper and research the above concerns with libraries and multiple executables.

[Oliver.O]

Did some homework: Seems like at build time, name clashes between multiple app.js executables do not occur, as each executable lands in its own project-specific build directory. Clashes occur when bundling multiple apps into another project, of course. With libraries, having many of them consumed by another project is common, so these should always have a unique name.

So I'd support Adam's idea as it solves the current problems and works in all cases.

[Oliver.O]

Folks reading this: Vote on the above issue if you agree!

[turansky]

In my cases I use content hash. As result - such replacement won’t work for me. 😞

[Oliver.O]

The issue’s proposal provides a default which you could still change. Wouldn’t that cover your use case? Am I correctly assuming that you’re currently explicitly setting the moduleName or outputFileName to the content hash?

[turansky]

content hash and file name conversion - responsibility of Webpack

[turansky]

It changes file name (add content hash in the end), as result - index.html can’t be processed by Kotlin in simple case

[Oliver.O]

OK, so the above solution would not help in your case, but it seems that it would not hurt either.