Migrating from Sage9 and when building with Bud, JS does not run

bud
1

Hello,
I think it must be something simple, but while migrating a Sage9 based theme to build with Bud, I’m running into an issue where the JavaScript does not execute. I’ve simplified things completely with only an alert, but it still does not execute.

Any tips would be much appreciated!

Setup is

bud.config.yml

setPath:
  - '@src'
  - 'resources/assets'
entry:
  - app
  - ['scripts/main.js', 'styles/main.scss']

scripts/main.js

function sayHello() {
  alert("this is my code here");
}
sayHello();

app.js (compiled)

(self.webpackChunk_roots_bud=self.webpackChunk_roots_bud||[]).push([[524],{"./scripts/main.js":()=>{alert("this is my code here")},"./styles/main.scss":()=>{}},s=>{var e=e=>s(s.s=e);e("./scripts/main.js"),e("./styles/main.scss")}]);

app.js is loaded by the page but the alert does not execute. I can see that Bud is wrapping things but am not certain how to trigger the code that it wraps.

Many thanks in advance.

Best

2

I also struggled with this when upgrading from Sage 9 to 10. The issue for me was that I had to enqueue it:

setup.php

add_action('wp_enqueue_scripts', function () {
    bundle('main')->enqueue()
}
1 Like
3

Hi @Tetrahedrax,

Unfortunately that is not it. The styles and js are enqueued and loaded into the page. However the JS just never executes.

Even if I ONLY include a window.alert statement in the JS that is compiled, even that does not run.

Somehow the JS that is compiled is not getting executed. I’m not sure why though.

Thanks for the suggestion though!

4

@Tetrahedrax’s suggestion should work if you’re using Acorn

Maybe the WordPress theme example from bud.js will get you on the right path?

https://github.com/roots/bud/blob/94e72f696d3bab61bf2aa87b30edf20994296952/examples/wordpress-theme/functions.php

You’ll probably notice a runtime file in your build directory that you aren’t including

5

Thanks!
I was not using acorn as I did not want to upgrade to PHP 8 yet given some legacy code. However, in the end I think the safer and more long term approach will be to just upgrade to Sage 10. I also tried using the “bundle” method, but then needed to include parts of Sage library for that as well. In the end I think it’s better not to hack things in and simply take the time to port the existing theme.

6

You can just make sure that the runtime file is enqueued and loaded before your theme JS, then you’ll be good to go