Migrated to Kotlin Multiplatfrom form JS and jsBro...

# react

[Paul Meshkovsky]

Migrated to Kotlin Multiplatfrom form JS and jsBrowserDevelopmentRun works BUT when running jsBrowserProductionWebpack the task fails updated setting to debug to see any relevant information
Hoping this is the right channel to aid on this getting the following error
1. Looking further this blew away our custom webpackConfig.js error and added patch.js now we see the following... .. after restoring webpackConfig.js issue is resolved.. I suspect this was done by IntelliJ

2024-10-28T17:09:44.788-0400 [DEBUG] [org.gradle.api.Task] ERROR in main
2024-10-28T17:09:44.788-0400 [DEBUG] [org.gradle.api.Task] Module not found: Error: Can't resolve './src' in '/Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal'
2024-10-28T17:09:44.788-0400 [DEBUG] [org.gradle.api.Task] resolve './src' in '/Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal'
2024-10-28T17:09:44.788-0400 [DEBUG] [org.gradle.api.Task]   using description file: /Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal/package.json (relative path: .)
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]     Field 'browser' doesn't contain a valid alias configuration
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]     using description file: /Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal/package.json (relative path: ./src)
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]       no extension
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         Field 'browser' doesn't contain a valid alias configuration
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         /Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal/src doesn't exist
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]       .js
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         Field 'browser' doesn't contain a valid alias configuration
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         /Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal/src.js doesn't exist
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]       .json
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         Field 'browser' doesn't contain a valid alias configuration
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         /Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal/src.json doesn't exist
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]       .wasm
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         Field 'browser' doesn't contain a valid alias configuration
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         /Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal/src.wasm doesn't exist
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]       as directory
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         /Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal/src doesn't exist

[turansky]

Migrated to Kotlin Multiplatfrom form JS

Do you mean migration on multiplatform plugin?

[Paul Meshkovsky]

that's right... And issue is when running root level build
so I have
root/build.gradle.kts
root/services/serviceA/build.gradle.kts
root/services/serviceB/build.gradle.kts
root/web/web-project/build.gradle.kts
root/web/web-project/webpack.config.d/webpackConfig.js <-- this file gets deleted and replaced with patch.js is added as total garbage 🤯

[Paul Meshkovsky]

Corrected this happend when I ran 'clean" task it removed root/web/web-project/webpack.config.d directory

[Paul Meshkovsky]

running gradle wrapper gradle-8.5

[Paul Meshkovsky]

After reverting deletion of root/web/web-project/webpack.config.d/webpackConfig.js And when I run build for root/web/web-project/ this generates patch.js in r*oot/web/web-project/webpack.config.d.*
the build is successful but what is needed to fix this behavior

val envTargetArg = (project.findProperty("envTarget") as String?)?.uppercase(Locale.getDefault())
val envTarget = when (envTargetArg) {
    "DEV", "STG", "PRD" -> envTargetArg
    null -> "DEV"
    else -> "DEV"
}

fun kotlinw(target: String): String =
    "org.jetbrains.kotlin-wrappers:kotlin-$target"

val ktor_version: String by project

kotlin {
    js(IR) {
        binaries.executable()
        browser {
            commonWebpackConfig {
                cssSupport(Action { true })
                export = false
            }

            val envTargetWebpackArgs = listOf("--env", "envTarget=$envTarget")
            webpackTask { args.plusAssign(envTargetWebpackArgs) }
            runTask { args.plusAssign(envTargetWebpackArgs) }
        }
    }
    sourceSets {
        val jsMain by getting {
            dependencies {
                implementation(enforcedPlatform(kotlinw("wrappers-bom:${rootProject.extra.get("kotlinWrappersVersion")}")))
                implementation(kotlinw("react"))
                implementation(kotlinw("react-dom"))
                implementation(kotlinw("react-router-dom"))
                implementation(kotlinw("emotion"))
                implementation(kotlinw("mui"))
                implementation(kotlinw("mui-icons"))
                ....
            }
        }
        val jsTest by getting {
            dependencies {
                implementation(kotlin("test"))
            }
        }
    }

}

[Paul Meshkovsky]

Looking at https://kotlinlang.org/docs/multiplatform-compatibility-guide.html#migration-from-kotlin-js-gradle-plugin-to-kotlin-multiplatform-gradle-plugin there is noting mentioned about this specific behavior

[turansky]

Looks like you use KFC plugins 😉
It generates custom patch.js as you described.

[turansky]

Options:
1. Move custom config on project level, configure patchWebpackConfig task to use additional config
2. Remove KFC plugin usage if it's not required

[Paul Meshkovsky]

@turansky our project needs it.
As technically it looks like its on the given web/react project level
root/web/web-project/build.gradle.kts
r*oot/web/web-project/webpack.config.d*
root/build.gradle.kts

[Paul Meshkovsky]

so what are my options as clearly before multiplatform we didn't see this behavior... I can use copy before jsBrowserProductionWebpack to move the directory right before that occurs and delete after the build is done...
But is there an official way this can be done using the plugin directly?

[turansky]

tasks.patchWebpackConfig {
    file("your additional config")
}