I try to use `@JsModule("@bootstrap/scss/_buttons....

# javascript

[hfhbd]

I try to use @JsModule("@bootstrap/scss/_buttons.scss") private external val Style: dynamic to load the style via web pack, similar what kmdc does, but who does it work as a consumer? My showcase project fails with: bootstrap module not found, because it should not explicit depend on this npm module: https://github.com/hfhbd/bootstrap-compose/pull/195

[Big Chungus]

Consumer also needs to enable scss via webpack.config.d

[Big Chungus]

This is standard practice in general js ecosystem

[hfhbd]

Hm, okay, added. But it is still not found. What magic do you use in kmdc? I can't find it 😄

[Big Chungus]

What's the exact error?

[hfhbd]

Module not found: Error: Can't resolve '@bootstrap/js/src/button.js' in '/Users/philipwedemann/GitHub/bootstrap-compose/build/js/packages/bootstrap-compose-showcase/kotlin'

[hfhbd]

In the showcase/sandbox project, which only use implementation(projects.bootstrapCompose) and not bootstrap itself. Is it still required?

[Big Chungus]

Two things:
1. @bootstrap/js/src/button.js it's not a (s)css module, something else is wrong
2. Consumer also needs bootstrap on the node path, of course. You can propagate that as a transitive dependency by declaring it as api(npm("bootstrap", "version")) as opposed to implementation() in your lib

[hfhbd]

I tried two things: (s)css style and js "behavior" implementation. And I copied the wrong error message for (s)css, but the message is the same:

Module not found: Error: Can't resolve '@bootstrap/scss/_buttons.scss' in '/Users/philipwedemann/GitHub/bootstrap-compose/build/js/packages/bootstrap-compose-showcase/kotlin'

2. yeah, I use api in my wrapper project: api(npm("bootstrap", "5.1.3"))

[Big Chungus]

Drop me a link to your feature branch, I'll have a look tomorrow

[hfhbd]

That would be nice! https://github.com/hfhbd/bootstrap-compose/pull/195 or https://github.com/hfhbd/bootstrap-compose/tree/components

[Big Chungus]

Ok so the issue is quite stupid afterall 😄

[Big Chungus]

here you use @bootstrap module name, however here you see that module name does not have the @ prefix.

[Big Chungus]

Aditionally, after fixing module name reference in Button.kt, you'll get some valid scss errors. To fix that you'll need to import the entire bootstrap scss bundle once as opposed to pinpointing scss for components

bootstrap/scss/bootstrap.scss

[hfhbd]

Thanks, you are my hero 😄

[Big Chungus]

BONUS: You might be interested in copying katalog tooling from kmdc to make your showcases more standardised, cleaner and provide source links without having to hard-code them everywhere.

[hfhbd]

I will take a look, thanks!

[Big Chungus]

Good luck!

[hfhbd]

Hm, but I still dont understand, why does it compile with @ in the first place? 😄

[Big Chungus]

Because it's js stuff that kotlin cannot validate

[Big Chungus]

To be precise it's an exotic js module (basically not a js file) so the kotlin compiler just goes "ok, whatever, i'll leave that in see how webpack likes it", then webpack comes along and sees the generated import/require for that module, looks up the node_modules and local paths and says "Oh, it's not a js file, lemmie see if I have a loader for that. I do! Now how about that file... wtf? there's no such thing!"

[hfhbd]

I understand the error message 😄 But isn't web pack applied in the main wrapper and the showcase project? Why does it "work" (without an error) in the main wrapper project?

[Big Chungus]

Webpack loads non-js resources lazily, so the error doesn't pop up until that file is actually requested

[hfhbd]

Ah, okay, thanks