In bootstrap 4 I can include util js + any other javascript (for example scrollspy) and it works, in BS5 it doesn't

[dazetoyo]

Let me clarify.
I work on a wordpress project, I don't have access to any compilers like webpack or able to use import.
I'm trying to transition to bs5. However, one thing I liked about BS4 is that if I need scrollspy just in a certain template, I can add util.js + scrollspy.js and mimify them. This gives me a 9kb JS file. vs the 83kb file that is the V4.6 bundle. I'm trying to optimize my site as much as possible.

How can I do this in bs5? I know if I use webpack I can use export and what not but I don't have access to these ES5 rules in normal javascript.

On the documentation it says "Plugins can be included individually (using Bootstrap’s individual js/dist/*.js), or all at once using bootstrap.js or the minified bootstrap.min.js (don’t include both)."
I tried including modal.js from dist and it says "Uncaught SyntaxError: Cannot use import statement outside a module".

Any suggestions?

[dazetoyo]

For what its worth I actually figured out how to do it and compile it (although I haven't found anything about this in the docs so its not as straightforward)

1. Download the BS5 source files.
2. Install npm
3. Go to /build/build-plugins.js in the bsPlugins constant and comment all the plugins you don't need for example:
   const bsPlugins = { // Data: path.resolve(__dirname, '../js/src/dom/data.js'), // EventHandler: path.resolve(__dirname, '../js/src/dom/event-handler.js'), // Manipulator: path.resolve(__dirname, '../js/src/dom/manipulator.js'), // SelectorEngine: path.resolve(__dirname, '../js/src/dom/selector-engine.js'), // Alert: path.resolve(__dirname, '../js/src/alert.js'), // Base: path.resolve(__dirname, '../js/src/base-component.js'), // Button: path.resolve(__dirname, '../js/src/button.js'), Carousel: path.resolve(__dirname, '../js/src/carousel.js'), // Collapse: path.resolve(__dirname, '../js/src/collapse.js'), // Dropdown: path.resolve(__dirname, '../js/src/dropdown.js'), // Modal: path.resolve(__dirname, '../js/src/modal.js') // Popover: path.resolve(__dirname, '../js/src/popover.js'), // ScrollSpy: path.resolve(__dirname, '../js/src/scrollspy.js'), // Tab: path.resolve(__dirname, '../js/src/tab.js'), // Toast: path.resolve(__dirname, '../js/src/toast.js'), // Tooltip: path.resolve(__dirname, '../js/src/tooltip.js') }
4. Go to /js/index.esm.js and /js/index.umd.js and do the same as above, comment out everything you don't need.
5. in your CMD run npm run dist

And now the bundle you want will be inside dist/js/bootstrap.bundle.min.js

This bs js only has the Carousel javascript now, and you can include it normally in a non webpack project <script src="bundle.js"> etc...

It would help a ton if this is explained more clearly in the docs, stressing this again, you can't just use the /src js files since they contain import statements ( in bs4 you could do that )

[XhmikosR]

It seems we no longer build util separately in v5. @Johann-S any ideas why? Not sure if it was intentional?

[Johann-S]

Yeah util is incorporated in each of our plugins, but not really, the only usefull parts are included in each of our separated plugins.
But to import for example just the modal plugin you have to import other parts too (Data, EventHandler, Manipulator, SelectorEngine and BaseComponent) which are built separately too : https://github.com/twbs/bootstrap/tree/v5.0.0-beta2/js/dist/dom

[GuySartorelli]

I was caught off-guard updating from bootstrap 4 to 5 because I used to import util.js as per the documentation: https://getbootstrap.com/docs/4.5/getting-started/javascript/#util

All Bootstrap’s JavaScript files depend on util.js and it has to be included alongside the other JavaScript files. If you’re using the compiled (or minified) bootstrap.js, there is no need to include this—it’s already there.

util.js includes utility functions and a basic helper for transitionEnd events as well as a CSS transition emulator. It’s used by the other plugins to check for CSS transition support and to catch hanging transitions.

Bootstrap 5 just doesn't mention it at all, most notably not even in the migration guide. I dunno if it's too late to do so but adding a note about it there would be awesome.
For my use case I was just including the file, and the solution for me is to simply not include it.

[julien-deramond]

Thanks for your feedback @GuySartorelli
Created a PR to enhance the migration guide at #41187
How it can help the next folks trying to migration from Bootstrap 4 to 5 :)