BudError when running "yarn dev"

bud
1

My install of Sage is looking good. I’m running locally using Laravel Valet. But HMR and Browsersync aren’t behaving as expected. It seems that my styles aren’t being compiled on save. Furthermore, I’m receiving this error when running yarn dev in my theme directory:

 BudError 

✘ options.port should be >= 0 and < 65536. Received type number (NaN).

╭ sage [4027a20fb5c83afa]                                                                                                                                                                  ./public
│
│ app
│  ◉ js/runtime.js                                                                                                                                                                         43.93 kB
│  ◉ js/app.js                                                                                                                                                                             80.03 kB
│
│ editor
│  ◉ js/runtime.js                                                                                                                                                                         43.93 kB
│  ◉ js/editor.js                                                                                                                                                                          59.12 kB
│
╰ 921ms 39 modules [0/39 modules cached]

How can I debug this? Do I need to fix my bud.config.js?

I’ve added the URLs to bud.config.js but I’m not sure if I’m doing it correctly:

app
    .setUrl('https://wordpressonvalet.test')
    .setProxyUrl('https://wordpressonvalet.test')
    .watch(['resources/views', 'app']);

One potential issue is I don’t know what to set my public path to. Neither of these make any difference in fixing the error:

app.setPublicPath('/app/themes/sage/public/');
app.setPublicPath('./public/');

Anyone know what’s going on? I appreciate any help!

2

The original bud.config.js of current Sage (v10.7.0) theme explicitly specifies the port in the URL passed to setUrl(...):

Also note that the URL and Proxy URL are not equal: The Url (not Proxy Url) option is used for the dev server (for watching), while the Proxy Url points to the local development WordPress site (e.g. in Vagrant/Valet/Docker/etc.) that should be proxied by the dev server (the dev server passes the requests to the development WordPress site in order to inject watch-specific JavaScript and changes).

2 Likes
3

Thank you for the explanation! I wasn’t clear on the difference bteween the two. That resolved the error when running yarn dev.

4

So, with this setting are you able to use HMR when browsing with http://example.test?

It’s not working for me and I get this in the console:

GET http://example.test/bud/hot 404 (Not Found)

Thanks

5

Hey asunyer, I hope you were able to figure this out - sorry I didn’t see this.

I only get HMR when on http://localhost:3000 which is the expected behavior. I was able to get it working with this configuration which doesn’t redirect me from localhost to the proxyURL:

app
    .setUrl('http://localhost:3000')
    .setProxyUrl('https://roots.test')
    .watch(['resources/views', 'app']);
6

Hi!, yes now I’m using it just like you. Thanks!