How do I avoid using NPM in my Hugo module for Bootstrap?

support
1

I’m developing a Hugo module for Bootstrap v5 and it works well. However, I wish to get rid of the package.json as I think it would be much better to go with Hugo modules all along.

As Bootstrap depends on @popperjs/core, I need to include it in the module(without using NPM) in a way so that ESBuild(Hugo’s jsBuild) resolves it as a dependency on runtime.

I tried scouring the docs, but I couldn’t find anything regarding this.
Thanks in advance.

1 Like
2

Bootstrap and Popper.js themselves work with package.json so removing it for some religious reasons might be overkill :wink: It’s just a file.

Having said that - the way I did it was to have popper.js as module in bootstrap. Have a look at these:

1 Like
3

Thanks @davidsneighbour. You’ve saved me a lot of time.

4

@davidsneighbour How do you get Bootstrap 5 to resolve @popperjs/core to popper.js/popper.js? I can’t get it to work.

5

I think it’s done here:

In Bootstrap then popper.js is available at libs/popper.js/popper.js - but only for imports… I’ll have to see where I used it to show a sample. You will have to use “Javascript Building” at least.

6

@davidsneighbour I think we cannot directly mount popperjs/popper-core as @popperjs/core since the GitHub repo contains flow typed source which isn’t supported by ESBuild.
To get it to work, I ended up vendoring the latest version of @popperjs/core in my Bootstrap 5 Hugo module.
Though there’s not much of a difference right now, but I like the fact that my module is finally NPM free and that I won’t need to do a hugo mod npm pack in my websites anymore (unless I want to use PostCSS :sweat_smile: which I definitely do).

2 Likes