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

**URL:** https://discourse.roots.io/t/bud-js-not-inserting-js-css-with-yarn-dev-sage-10-local-by-flywheel/26391
**Category:** bud
**Created:** 2023-12-06T11:44:40Z
**Posts:** 8

## Post 1 by @sariyanta — 2023-12-06T11:44:40Z

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.

---

## Post 2 by @vdrnn — 2023-12-06T12:11:25Z

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

---

## Post 3 by @sariyanta — 2023-12-06T12:13:39Z

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/
```

---

## Post 4 by @sariyanta — 2023-12-07T07:38:36Z

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",
```

---

## Post 5 by @vdrnn — 2023-12-07T07:55:26Z

That version is from February 2023 ([6.8.0 | bud.js](https://bud.js.org/releases/6.8.0)), 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](http://localhost:3000) and not [http://0.0.0.0:3000](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.

---

## Post 6 by @JayLehtinen — 2023-12-14T01:50:56Z

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.

---

## Post 7 by @JayLehtinen — 2023-12-21T19:35:04Z

This issue seems to be fixed in v6.20.0!

---

## Post 8 by @ArcticPrimal — 2023-12-22T12:09:06Z

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