ChunkLoadErrors with custom blocks

I am getting chunkload errors in dev mode with a simple custom block with a slider (block generated with acf-composer)

This is the relevant code:


export default async (app) => {

      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
      mySlider: ["@scripts/blocks/mySlider", "@styles/blocks/mySlider"]


    .watch(["resources/views/**/*", "app/**/*"])




namespace App\Blocks;

use Log1x\AcfComposer\Block;
use StoutLogic\AcfBuilder\FieldsBuilder;
use function Roots\bundle;

class mySlider extends Block

    public function enqueue()


import Swiper from "swiper/bundle";

console.log("my slider");
const swiper = new Swiper('.swiper', {
  on: {
    init: function () {
      console.log('swiper initialized');
  loop: true,
  autoplay: {
    delay: 3000,
  slidesPerView: 1,
  spaceBetween: 0

mySlider.js uses Swiper.js:


"devDependencies": {
    "@roots/bud": "6.3.5",
    "@roots/bud-postcss": "^6.3.5",
    "@roots/bud-sass": "^6.3.5",
    "@roots/bud-tailwindcss": "^6.3.5",
    "@roots/sage": "6.3.5",
    "swiper": "^8.3.2"

The slider block works fine, but when I am in dev mode on a page with that block, I get these errors whenever I change something in mySlider.js as well as in app.js.

Uncaught (in promise) ChunkLoadError: Loading hot update chunk app failed.
(missing: http://localhost:3000/

However, that chunk is in my public folder

When the block is not on the page I don’t get these errors

I’m on the lastest Sage with Bud 6.3.5

Thanks for the excellent description of the problem.

I’ll have to look into it more (and again, thanks for giving me enough to go on), but I suspect this is because sage is set up by default to share a common runtime between all entrypoints.

In the meantime, the first thing I would do is try disabling the runtime chunk in development:

bud.when(bud.isDevelopment, bud => bud.runtime(false))

If that doesn’t do it you might want to try grouping the block and its dependencies into a common chunk with bud.bundle.

I’ll try and reproduce when I get a moment.

Thanks for helping kellymears

I added this to my bud.config.mjs:

.when(app.isDevelopment, app => app.runtime(false))

To be sure I also tried simply: .runtime(false)

Same result though. And chunks are still being built (is that expected?)

yeah, that wouldn’t stop all chunking, just the runtime chunks.

you can fully disable all chunking by adding splitChunks (works like mix vendor):

bud.when(bud.isDevelopment, () => bud.splitChunks(false).runtime(false))

if you use dynamic imports they’ll still be separated, i think.