Bud.js not inserting JS/CSS with yarn dev | Sage 10 | Local by Flywheel

Last night everything was working fine. This morning the yarn dev command not injecting any script to the site. Yarn build works fine though.

Here’s my bud config

/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/docs/sage sage documentation}
 * @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
 *
 * @type {import('@roots/bud').Config}
 */
export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/docs/bud.entry}
   * @see {@link https://bud.js.org/docs/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images', 'fonts']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/docs/bud.setPublicPath}
   */
  app.setPublicPath('/wp-content/themes/sariyanta/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://sariyanta.local')
    .watch(['resources/views', 'app'])
    .serve('http://0.0.0.0:3000');

  /**
   * 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}
   */
  app.wpjson
    .setSettings({
      color: {
        custom: false,
        customDuotone: false,
        customGradient: false,
        defaultDuotone: false,
        defaultGradients: false,
        defaultPalette: false,
        duotone: [],
      },
      custom: {
        spacing: {},
        typography: {
          'font-size': {},
          'line-height': {},
        },
      },
      spacing: {
        padding: true,
        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      },
      typography: {
        customFontSize: false,
      },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize();
};

Here’s my package.json

"devDependencies": {
    "@roots/bud": "nightly",
    "@roots/bud-tailwindcss": "nightly",
    "@roots/sage": "nightly",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/forms": "^0.5.7",
    "@tailwindcss/typography": "^0.5.10"
  },

I even tried cloning the current version of sage from github and instal it on the wordpress installation. It too has the same issue.

No Idea where to go from here.

First things first, have a look in the /public folder if the files are generated there? What happens if you run yarn build?

If I do yarn build, it works fine.
The issue only happens on yarn dev.
Here’s the outcome of yarn build:

sage [f20384791d6a2c32]                                                                                       ./public
β”‚
β”‚ app
β”‚  β—‰ js/runtime.c039ed.js                                                                                      βœ” 1.31 kB
β”‚  β—‰ css/app.74fd62.css                                                                                       βœ” 34.63 kB
β”‚  β—‰ js/app.5c94a0.js                                                                                         βœ” 43.84 kB
β”‚
β”‚ editor
β”‚  β—‰ js/runtime.c039ed.js                                                                                      βœ” 1.31 kB
β”‚  β—‰ css/editor.ef46db.css                                                                                           βœ” ΓΈ
β”‚  β—‰ js/editor.0344c8.js                                                                                       βœ” 1.78 kB
β”‚
β”‚ assets
β”‚  β—‰ fonts/inter-v13-latin-800.f15de3.woff2                                                                     22.79 kB
β”‚  β—‰ fonts/inter-v13-latin-500.7d0979.woff2                                                                     22.76 kB
β”‚  β—‰ fonts/inter-v13-latin-300.1e64cb.woff2                                                                     22.44 kB
β”‚  β—‰ fonts/inter-v13-latin-900.2a9246.woff2                                                                     21.96 kB
β”‚  β—‰ fonts/inter-v13-latin-regular.ac3740.woff2                                                                 21.56 kB
β”‚  … 10 additional assets not shown
β”‚
β•° 2s 786ms 48 modules [4/48 modules cached]

This is the result of yarn dev

β•­ sage [ad502004f3ae3c02]                                                                                       ./public
β”‚
β”‚ app
β”‚  β—‰ js/runtime.js                                                                                               49.2 kB
β”‚  β—‰ js/app.js                                                                                                 356.71 kB
β”‚
β”‚ editor
β”‚  β—‰ js/runtime.js                                                                                               49.2 kB
β”‚  β—‰ js/editor.js                                                                                              128.27 kB
β”‚
β”‚ assets
β”‚  β—‰ fonts/inter-v13-latin-800.woff2                                                                            22.79 kB
β”‚  β—‰ fonts/inter-v13-latin-500.woff2                                                                            22.76 kB
β”‚  β—‰ fonts/inter-v13-latin-300.woff2                                                                            22.44 kB
β”‚  β—‰ fonts/inter-v13-latin-900.woff2                                                                            21.96 kB
β”‚  β—‰ fonts/inter-v13-latin-regular.woff2                                                                        21.56 kB
β”‚  … 9 additional assets not shown
β”‚
β•° 1s 654ms 127 modules [0/127 modules cached]

 Network

 β€Ί Proxy  β”„ http://sariyanta.local/
 β€Ί Dev    β”„ http://0.0.0.0:3000/
          β”„ http://192.168.2.6:3000/

I rolled back to versions 6.8.0 and the issue went away.

 "@roots/bud": "6.8.0",
 "@roots/bud-tailwindcss": "6.8.0",
 "@roots/sage": "6.8.0",
2 Likes

That version is from February 2023 (6.8.0 | bud.js), the current version is 6.18.0. You should definitely give it another try with the latest version and figure out where the problem is. Have you activated SSL? If so, your local proxy domain should have https:// and also, dev in the current version is http://localhost:3000 and not http://0.0.0.0:3000. Hope that helps, but I’m pretty sure it’s just a problem with that network configuration in bud.config.js.

1 Like

I have the same issue. Updated deps to latest on my Bootstrap project and running β€˜npm run dev’ no longer injects any CSS. β€˜npm run build’ works fine.

EDIT: Rolling back to version 6.17.0 solved the issue.

This issue seems to be fixed in v6.20.0!

1 Like

I had the same issue when using v6.19.1 and after updating to v6.20.0, it works perfectly with the same configuration I originally had when β€œyarn dev” wasn’t working. Your configuration seems correct, try updating to v6.20.0