BudError when running "yarn dev"

graham · November 11, 2023, 10:05pm

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!

strarsis · November 12, 2023, 12:46am

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

github.com

roots/sage/blob/14f2f9ade4de8da8d94a890a658dccf61a09e546/bud.config.js#L36


      
          app.setPublicPath('/app/themes/sage/public/');
          
          /**
           * Development server settings
           *
           * @see {@link https://bud.js.org/docs/bud.setUrl}
           * @see {@link https://bud.js.org/docs/bud.setProxyUrl}
           * @see {@link https://bud.js.org/docs/bud.watch}
           */
          app
            .setUrl('http://localhost:3000')
            .setProxyUrl('http://example.test')
            .watch(['resources/views', 'app']);
          
          /**
           * Generate WordPress `theme.json`
           *
           * @note This overwrites `theme.json` on every build.
           *
           * @see {@link https://bud.js.org/extensions/sage/theme.json}
           * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}

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

graham · November 12, 2023, 1:51am

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