https://kotlinlang.org logo
Join Slack
Powered by
Hey, I have a compose web library (bootstrap-compo...
# javascript
h
Hey, I have a compose web library (bootstrap-compose) which uses the npm library bootstrap. This dependency contains the released css and js files, which I want to forward them to my consumers, via 
api(npm("bootstrap"))
. The js files are included, but the css files are not. How can I publish the css files too, so the user does not need to import it separatly?
b
Are the css files your own or part of that npm package?
If they are your own, unfortunately there's no way to include any resources in kn or kjs libs at the moment.
But if they're part of the package, then they will be downloaded and on webpack classpath just like in regular js project
h
Part of bootstrap, I just want to forward them
b
And if you do need to include your own resources, the best option so far is to do what #kvision is doing and publish them to npmjs in an npm package and then have your klib depend on it as npm dependency
What makes you think that bootstrap css is not being forwarded?
h
the css style is not loaded 😄
Copy code
// bootstrap-compose
js(IR) {
        browser {
            binaries.library()
            commonWebpackConfig {
                cssSupport.enabled = true
            }
        }
    }
val jsMain by getting {
            dependencies {
                api(npm("bootstrap", "5.1.3"))
            }
        }

// showcase
js(IR) {
        browser {
            binaries.executable()
            commonWebpackConfig {
                cssSupport.enabled = true
            }
        }
    }

    sourceSets {
        val jsMain by getting {
            dependencies {
                implementation(projects.bootstrapCompose)
            }
        }
    }
index of showcase
Copy code
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
    <title>Bootstrap Compose Showcase</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body class="h-100">
<div id="root" class="d-flex flex-column h-100"></div>
</body>
<script src="showcase.js"></script>
</html>
Or do I need to import/load the css file in Kotlin code?
b
Yep, you need to load it from kt/js sources 😀 however that can be done from your klib code too. As long as it's somehow invoked from showcase main
But that's just how css js imports work in general.
h
Hm, thanks for the sample, but I still dont get it. I tried this, but it fails 😄
Copy code
@OptIn(ExperimentalStdlibApi::class)
@EagerInitialization
internal val loadCss: Unit = run {
    require("bootstrap/dist/css/bootstrap.min.css")
}

internal external fun require(module: String): dynamic
b
Sorry, I'm away from my laptop for now. I'll ping you back when I'm home later on if you won't solve it by then 😊
What's the error btw?
h
This:
Copy code
Module build failed (from /Users/philipwedemann/GitHub/bootstrap-compose/build/js/node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
How did you solve this with your kmdc wrapper?
b
I didn't really do anything special for this. It just worked for me. But it looks like it's css loader issue, not bootstrap css
âž• 1
h
I found my stupid mistake… For some reasons I had kotlin.js.webpack.major.version=4 in my gradle properties. And css-loader requires webpack v5
b
Phew... Glad you figured it out eventually
h
Yeah, but thanks for your support!
85 Views
Open in Slack
PreviousNext
Powered by