How to share code between multiple multiplatform modules used in JS?

Support
1

I’m currently trying out kotlin multiplatform with jvm and js targets. The idea was to create a module structure like this:

  • a-client: Multiplatform module containing model code and methods needed to call backend Api A
  • b-client: Multiplatform module containing model code and methods needed to call backend Api B
  • common-client: Multiplatform module containing code that is shared by a-client and b-client (for example creation of the ktor-HttpClient)
  • frontend: react (typescript) module using a-client/b-client/common-client

Here is a full example of this: GitHub - Fabian-G/shared-mpp

Like I said I am using ktor-client to make the HttpRequests in a-client and b-client. The client itself is created in common-client and then injected via constructor parameter to a-client/b-client.
I do it like that, because I would prefer if I could manage the HttpClient in the frontend module so that I could hand the very same HttpClient to a-client and b-client if I wanted to.
This does not work though. As soon as either a-client or b-client tries to use it I get this error at runtime:

Uncaught (in promise) TypeError: this.__this__10._client.execute_ixyi6b_k$ is not a function
    doResume_0_k$ HttpStatement.kt:104
    executeUnsafe_0_k$ HttpStatement.kt:101
    doResume_0_k$ TodosApi.kt:17
    findById_ha5a7z_k$ TodosApi.kt:13
    doResume_0_k$ JsTodosApi.kt:18
    invoke_mzru1z_k$ JsTodosApi.kt:17
    l bundle.js:38410
    doResume_2_0_k$ IntrinsicsJs.kt:163
    doResume_0_k$ bundle.js:11608
    resumeWith_jccoe6_k$ Standard.kt:55
    resumeWith_bnunh2_k$ bundle.js:11512
    resumeCancellableWith DispatchedContinuation.kt:283
    startCoroutineCancellable Cancellable.kt:30
    startCoroutineImpl Builders.common.kt:192
    start_hfyz87_k$ Builders.kt:28
    async Builders.common.kt:91
    promise Promise.kt:30
    promise$default Promise.kt:25
    findById JsTodosApi.kt:19
    loadTodo App.tsx:27
    React 14
    unstable_runWithPriority scheduler.development.js:468
    React 4
HttpStatement.kt:104

In the linked repo there is also another branch where I instead added the dependencies a-client -> common-client and b-client -> common-client and then create two HttpClients by using the factoryMethods of the common-client bundled with a-client (respectively b-client), which works fine, but also doesn’t allow me to share the same HttpClient with a-client and b-client.
Is this possible at all? If so, can you give me some pointers here?

2

Alright, so I came up with this: GitHub - Fabian-G/shared-mpp at meta_client.
Basically I added yet another module, which just pulls in a-client, b-client and common-client as dependency and therefore exposes them as a single bundle to the frontend. While this enables me to do what I want, it looks rather odd to me.
Feels like I’m doing something fundamentally wrong here tbh. So any thoughts on this would be very welcome.