How can I use this with Webpack?

[john01dav]

Is your feature request related to a problem? Please describe. I'm a bit new to web development, so I don't fully understand the various build tools yet (e.g. webpack, parcel, the loaders that webpack uses, posthtml, etc.). I'd like to read a good book that properly explains all these things, but I have not been able to find any such book, so I'm stuck making issues like these when documentation isn't sufficient until I learn enough from them to not have to do so anymore.

Right now, the issue that I'm having with is integrating this with Webpack. I have all of my CSS and JS bundled into a single Webpack bundle. For example, Bootstrap is included like this:

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';

and then I just need to include Webpack's bundle in my HTML files (which are rendered via Posthtml) via a normal <script src=… tag. This works great for Bootstrap, but not so much for bstreeview. When I try to include it like this:

import 'bstreeview/dist/css/bstreeview.min.css'; //in my bootstrap CSS include file
import 'bstreeview/dist/js/bstreeview.min.js'; //in the JS file that will build my treeviews (jquery is included separately)

I get breakage. Specifically, when I have the first line that includes the CSS, everything works out how it should, but when I have the second line all of my CSS breaks (I see unstyled pages). When I try to just do include 'bstreeview';, following what I did with Boostrap, I get Can't resolve 'bstreeview'.

Describe the solution you'd like I would like to see a working example where this library is included via Webpack. I strongly suspect that I'm missing some small (and undocumented, from what I've seen) details for how Webpack and/or this library work, so seeing a complete example is I think, the best way to make this library accessible to me.

Describe alternatives you've considered I have considered including the CSS and JS files from this in an ad-hoc manner,bypassing any build system and checking it into my own VCS directly instead of including it via NPM, but then I would be forced to include any code that eventually depends on this in a similar ad-hoc manner, which is a significant chunk of my code base. While I could probably make this work, the code quality would be down the drain so it's only technically an option.

I could also try to create my own library that does the same thing, but that's reinventing the wheel unnecessarily when a good library seems to already exist here.

[john01dav]

I ended up modifying the code a bit to turn it into an ES6 module that includes its CSS via Webpack's CSS loader. Although the changes are trivial, I am willing to contribute them back if they're wanted. Note that with these changes a loader such as Webpack must be used.

[chniter]

Hi,

Thanks for report, can you share your solution please.

[john01dav]

@chniter Here's my ES6 module. It can be loaded in webpack as-is, but make sure that the CSS loader is setup and that jQuery is installed via npm. Feel free to let me know if you have any questions :)

webpack-tree-view.zip

[Hellfar]

@john01dav I feel like we were wiling to document your solution or to fix it in the repo. Can you actually explain what you did ?

[Hellfar]

Hey again !

I've created a PR in order to fix this issue.

Here it is: https://github.com/chniter/bstreeview/pull/26/files

Pls, do not hesitate to comment, ask for modifications or review it.

This is now working for me in:

• webpacker (5.4.0) inside Rails 6.1.4
• node (v16.4.0)
• Ruby (2.7.1) (even though I do not think this is relevant).

(PS: Also, do not forget to test it under your package manager as well :) .)