ChunkLoadErrors with custom blocks

bud
1

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:

bud.config.mjs

export default async (app) => {
  app

    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
      mySlider: ["@scripts/blocks/mySlider", "@styles/blocks/mySlider"]
    })

    .assets(["images"])

    .watch(["resources/views/**/*", "app/**/*"])
    
    .proxy("https://mysite.lndo.site")

    .serve("http://0.0.0.0:3000")

    .setPublicPath("/app/themes/my-theme/public/");
};

mySlider.php

namespace App\Blocks;

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

class mySlider extends Block
{
   [...]

    public function enqueue()
        {      
          bundle('mySlider')->enqueue();
        }

mySlider.js

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:

package.json

"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/app.facbdb7be62296078d5a.hot-update.js

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

2

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.

3

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?)

4

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.