Ktor: Can't compile project with Ktor JS client because of webpack errors

[DaanVandenBosch]

Ktor Version and Engine Used (client or server and name)
io.ktor:ktor-client-js 1.3.0-beta-1 and 1.2.5

Describe the bug
Webpack "Module not found" errors are thrown.

Logs:

  WARNING in .._imported/ktor-ktor-client-core/1.3.0-beta-1/ktor-ktor-client-core.js 12165:13-32
  Critical dependency: the request of a dependency is an expression
   @ ./kotlin/gaia.js
   @ multi ./kotlin/gaia.js source-map-support/browser-source-map-support.js

  WARNING in .._imported/ktor-ktor-client-core/1.3.0-beta-1/ktor-ktor-client-core.js
  Module not found: Error: Can't resolve 'ws' in 'C:\Users\Daan\code\gaia\build\js\packages_imported\ktor-ktor-client-core\1.3.0-beta-1'
   @ .._imported/ktor-ktor-client-core/1.3.0-beta-1/ktor-ktor-client-core.js
   @ ./kotlin/gaia.js
   @ multi ./kotlin/gaia.js source-map-support/browser-source-map-support.js

  ERROR in .._imported/ktor-ktor-io/1.3.0-beta-1/ktor-ktor-io.js
  Module not found: Error: Can't resolve 'text-encoding' in 'C:\Users\Daan\code\gaia\build\js\packages_imported\ktor-ktor-io\1.3.0-beta-1'
   @ .._imported/ktor-ktor-io/1.3.0-beta-1/ktor-ktor-io.js 20149:21-45 20217:21-45
   @ .._imported/ktor-ktor-client-json/1.3.0-beta-1/ktor-ktor-client-json.js
   @ ./kotlin/gaia.js
   @ multi ./kotlin/gaia.js source-map-support/browser-source-map-support.js

To Reproduce
Steps to reproduce the behavior:

1. Add the io.ktor:ktor-client-js dependency to a Kotlin multi-platform project
2. Run ./gradlew jsBrowserWebpack
3. See errors

[lamba92]

Add text-encoding manually:

sourceSets["main"].dependencies { // or sourceSets["jsMain"] on mpp
    implementation(npm("text-encoding", "0.7.0"))
}

[dhakehurst]

I too am getting similar errors from webpack,

WARNING in ./node_modules/ktor-ktor-client-core/ktor-ktor-client-core.js 12105:13-32
Critical dependency: the request of a dependency is an expression

function jsRequire(moduleName) {
    try {
      return require(moduleName);   // line: 12105
    }    catch (cause) {
   throw Error_init("Error loading module '" + moduleName + "': " + cause.toString());
  }
}

[bjonnh]

text-encoding is now unmaintained: https://www.npmjs.com/package/text-encoding

[night-crawler]

I've run into the same problem here. I'm using 1.3.1 version of io.ktor:ktor-client-js. I've added npm dependencies:

implementation(npm("abort-controller"))
implementation(npm("text-encoding"))

So, I get this:

WARNING in /.../build/js/packages_imported/ktor-ktor-client-core/1.3.1/ktor-ktor-client-core.js 16700:13-32
Critical dependency: the request of a dependency is an expression

Anyways, it does work, but I have concerns if everything is OK really. Probably it's not.

[winthrop-polk]

Getting the same results. Its odd...All this text is red and it wasn't there until a moment ago when I added a bunch of multi platform dependencies.

[MMauro94]

I'm getting the same error in a multiplatform project when I try to add (and use) the io.ktor:ktor-client-websockets-js dependency. (Ktor version: 1.3.2)

WARNING in ./kotlin-dce/ktor-ktor-client-core.js 8273:13-32
Critical dependency: the request of a dependency is an expression
 @ ./kotlin-dce/fileflow.js
 @ multi ./kotlin-dce/fileflow.js

ERROR in ./kotlin-dce/ktor-ktor-client-core.js
Module not found: Error: Can't resolve 'abort-controller' in 'C:\Users\molin\Desktop\kt\fileflow\build\js\packages\fileflow\kotlin-dce'
 @ ./kotlin-dce/ktor-ktor-client-core.js 8259:23-50
 @ ./kotlin-dce/fileflow.js
 @ multi ./kotlin-dce/fileflow.js

ERROR in ./kotlin-dce/ktor-ktor-io.js
Module not found: Error: Can't resolve 'text-encoding' in 'C:\Users\molin\Desktop\kt\fileflow\build\js\packages\fileflow\kotlin-dce'
 @ ./kotlin-dce/ktor-ktor-io.js 6805:21-45 6815:21-45
 @ ./kotlin-dce/ktor-ktor-client-core.js
 @ ./kotlin-dce/fileflow.js
 @ multi ./kotlin-dce/fileflow.js

Code in JS target:

//If commented out compilation error disappears (probably dependency gets optimized out?)
val client = HttpClient {
    install(WebSockets)
}

I tried to manually add the missing dependencies as suggsted above like so:

implementation(npm("text-encoding", "0.7.0"))
implementation(npm("abort-controller", "3.0.0"))
//These additionals dependencies pop out after adding the ones above
implementation(npm("utf-8-validate", "5.0.2"))
implementation(npm("bufferutil", "4.0.1"))
implementation(npm("fs", "0.0.2"))

...then the task runs successfully but the generated JS is broken:

Uncaught TypeError: b is not a function
    at Object.l (fileflow.js:39)
    at Object.<anonymous> (fileflow.js:39)
    at n (fileflow.js:1)
    at Object.<anonymous> (fileflow.js:39)
    at n (fileflow.js:1)
    at Object.<anonymous> (fileflow.js:39)
    at n (fileflow.js:1)
    at Object.<anonymous> (fileflow.js:39)
    at n (fileflow.js:1)
    at fileflow.js:1

EDIT: nevermind the websocket dependency, does the same even with just the standard ktor-client-js

[winthrop-polk]

I did manage to eliminate all these messages, but I do not fully recall how. I think the reasons were different for different packages but it usually came down to what one would expect, can't find the dependency where intellij thinks it should be. Here are a few suggestions

• don't use npm() unless that is your target, don't use it for browser {}. This I think was a main cause of this error and other nightmares. I don't think this npm function is yet designed fully to support serving up NPM packages as browser dependencies (I've read you shouldn't do that anyway because npm packages themselves aren't designed for this, but I found no real official confirmation. This is all just an impression after spending 60 hours trying to get it working with support assistance. In reality, the problem is likely with karma and webpack gradle plugins burried in the multiplatform plugin, it is not being told were to look correctly. Looking at the source code, these two functions seem way to minimal to be of use... almost like placeholders that do the dead minimum to be released... I mean, I think there were only 2 configuration parameters for webpack, neither of which told it whether to use resources or npm for serving dependancies.
• instead of npm, put your minified js packages placed in resources and served up with ktor static routes. If your using karma take a look at this, had to do a work around to configure karma outside of gradle... which defeats the purpose of gradle IMHO.

https://youtrack.jetbrains.com/issue/KT-38110

[edvorg]

This might be helpful to someone having runtime problem Uncaught TypeError: b is not a function : it can be solved like so https://kotlinlang.org/docs/reference/javascript-dce.html#known-issue-dce-and-ktor.

CC @MMauro94 please see if it resolves the issue for you.

[MMauro94]

@edvorg Yep, that fixed it! Many thanks! I was able to perform a simple hello world with web sockets.

My build.gradle now looks like this:

kotlin {
    js {
        browser {
            dceTask {
                keep("ktor-ktor-io.\$\$importsForInline\$\$.ktor-ktor-io.io.ktor.utils.io")
            }
        }
    }
    //...
    sourceSets {
        //...
        jsMain {
            dependencies {
                implementation kotlin('stdlib-js')

                implementation "io.ktor:ktor-client-js:$ktor_version"
                implementation "io.ktor:ktor-client-websockets-js:$ktor_version"
                implementation(npm("text-encoding", "0.7.0"))
                implementation(npm("abort-controller", "3.0.0"))
            }
        }
    }

[oleg-larshin]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.