How to properly add additional js files

[ItsLefty]

Hi there! Having only used oldschool CSS and JS so far, I'm still new to the npm build process. I am trying to add additional JS plugins into my understrap child theme for example headroom.js and I couldn't find newer topics how to achieve this.

Is this the correct approach? In the src/build/rollup.config.js I have added path.resolve( __dirname, '../js/headroom.min.js' ), just before the path.resolve with the custom-javascript file After recompiling, it looks like the additional file is imported into the child-theme.min.js. Then I've tried to call the headroom script in the custom-javascript.js However there is an error saying: Uncaught ReferenceError: Headroom is not defined

If I add the headroom.js file in the WordPress traditional style via wp_enqueue_scripts in the funtions.php everything is working. But then, the js file will be separately loaded into the footer, which is bad because I want to have everything in the child-theme.min.js

Is this an issue with headroom.js or how can I solve this? Thanks in advance!

[bacoords]

If you're seeing Uncaught ReferenceError: Headroom is not defined it means that you'll either need to import Headroom into the build process or else ensure it's loaded on the page and is globally accessible before you try to use it.

[dchatchet]

I am in this exact position now, trying to add a small .js file to the build process. Did you ever resolve this? I was doing what you mentioned in your original ask but it doesn't even grab the file from the js directory.