Enqueueing JS files

Hi,

I am trying to enqueue a custom JS.

  wp_enqueue_script('sample.js', asset('scripts/sample.js')->uri(), false, null);

in my bud.config, I am initialising

 app.entry('sample', ['@scripts/sample', '@styles/blocks/sample'])

However, it seems like it’s not loading from the correct folder as @scripts seems to be adding it in public/js/sample.js directory, but the full path of the JS file is /themes/xyz/public/scripts/sample.js . Changing the asset path to asset('js/sample.js')->uri() doesn’t seem to work.

Any advice is appreciated. I am probably confusing myself too haha.

You have 2 ways:
Option A:

\Roots\bundle('app')->enqueue();
\Roots\bundle('sample')->enqueue();

Option B:
In public/manifest.json you can check the key to get compiled path.

wp_enqueue_script('app.js', asset('app.js'), false, null);
wp_enqueue_script('sample.js', asset('sample.js'), false, null);

Thanks for the suggestions. I find it interesting that both code returns different paths for me.

use function Roots\bundle;

bundle('sample')->enqueue();
// returns public/scripts/sample.js

wp_enqueue_script('sample.js', asset('sample')->uri(), false, null);
// works and returns public/js/sample.js

Also, I am trying to get this to conditionally load only when a block is added, but doesn’t seem to work.

if ( ! wp_script_is( 'sample.js', 'enqueued' ) ) {
  ....
}

Hmm. Still needs a fair bit of investigation.