Compile JS from block folders and add them to app.js

Hey all.

I’m developing a site using Gutenberg blocks and am in the process of trying to get app.js to grab all the js files from all block folders in views/blocks/**/*

I’m already grabbing all the css and scss files from all folders and compiling those into app.css and that’s working great with the aid of fast-glob.

My file structure is organised like this:


and in each:


However I can’t get the same working for js files. Here’s my bud.config.mjs file:

     * Application entrypoints
      app: ["@scripts/app", "@styles/app", "views/blocks/**/*.{css,scss,js}"],
      editor: ["@scripts/editor", "@styles/editor"],

I’ve also tried adding:

     * Application entrypoints
      app: ["@scripts/app", "@styles/app", "views/blocks/**/*.{css,scss}"],
      editor: ["@scripts/editor", "@styles/editor"],
      blocks: ["views/blocks/**/*.{js}"]

But neither work for me. When it compiles OK, I get errors that imports aren’t working.

Here’s an example of a Swiper in banner.js:

import Swiper from 'swiper/bundle';

// init Swiper:
const swiperbanner = new Swiper('.swiper-banner', {
    // Optional parameters
    loop: true,
    // If we need pagination
    pagination: {
        el: '.swiper-banner-pagination',
        clickable: true

Any ideas / advice would be highly appreciated.

Bud config for outputting multiple css files (from scss for ACF Blocks) - #6 by kellymears this thread might be what you’re looking for