Enqueue JS dependencies not working

Hello all!

Trying to enqueue some JS files which are dependent on a ‘core’ JS file, all files are local, nothing remote.

I am essentially looking for the equivalent of this:

wp_enqueue_script('dropzone', 'path/to/dropzone.js', ['core'], '1.0', true);

By using bundle('dropzone')->enqueueJs(true, ['core/0']); I keep getting several JS errors such as ReferenceError: xxx is not defined, these are things which are in the ‘core’ JS file which makes me think that the dependency is not being loaded (in time?). The code works if i reference as it using the standard WP enqueue script function.

My files look like this:

/* /theme/bud.config.mjs */
...
.entry({
    core: ["@scripts/path/to/core"],
    chartjs: ["@scripts/path/to/chartjs"],
    dropzone: ["@scripts/path/to/dropzone"],
    ...
})
...
// /theme/app/setup.php
use function Roots\bundle;

/**
 * Register the theme assets.
 *
 * @return void
 */
add_action('wp_enqueue_scripts', function () {
    bundle('core')->enqueue();
    bundle('dropzone')->enqueueJs(true, ['core/0']);
    bundle('chartjs')->enqueueJs(true, ['core/0']);
}, 100);
...
<!-- Loaded in the browser -->
<script src='http://domain.local/app/themes/theme-name/public/js/core.js' id='core/0-js'></script>
<script src='http://domain.local/app/themes/theme-name/public/js/chartjs.js' id='chartjs/0-js'></script>
<script src='http://domain.local/app/themes/theme-name/public/js/dropzone.js' id='dropzone/0-js'></script>
  • I’ve opted to use enqueueJs so i can define dependencies.
  • I need to define the files separately as some will be conditionally loaded on specific pages.
  • I’m defining the dependency as core/0 and not just core because this is how the handle is rendered, e.g. if i just define the dependency for ‘dropzone’ as core the ‘dropzone’ file doesn’t enqueue at all

Currently all the files enqueue correctly, but the as mentioned I’m getting a reference error, which makes me think the dependency param in enqueueJs() is not respected.

Thanks!

Is there a reason not to make core part of the more specific entry points rather than it’s own entry point? i.e.:

.entry({
    chartjs: ["@scripts/path/to/core", "@scripts/path/to/chartjs"],
    dropzone: ["@scripts/path/to/core", "@scripts/path/to/dropzone"],
    ...
})

Then your scripts import it themselves, bud can handle loading and de-duplicating, and you don’t need to deal w/ WP’s enqueue system for dependencies.

I’m using a pre-made theme and without going into to too much detail, I would prefer to go down the WP enqueue system and define the dependencies there.

Is there anyway we can get that working?