# How to use .provide() in Bud.js?

**URL:** https://discourse.roots.io/t/how-to-use-provide-in-bud-js/24315
**Category:** bud
**Tags:** bud, sage10
**Created:** 2022-11-28T13:07:18Z
**Posts:** 3

## Post 1 by @philipp — 2022-11-28T13:07:18Z

I am upgrading from Bud 4.x to the latest 6.6.2 by switching to an `bud.config.mjs` file.  
Everything works as expected so far except `.provide` does not work for me.

In my `bud.config.mjs`:

```
.provide({
  jquery: '$'
})
```

Error: `value.reduce is not a function`

I followed the documentation here: [bud.provide | bud.js](https://bud.js.org/docs/bud.provide)

A hint what I am doing wrong would be very helpful! My full `bud.config.mjs` is:

```
/**
 * Build configuration
 *
 * @see {@link https://bud.js.org/guides/configure}
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  app
    /**
     * Application entrypoints
     */
    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
      map: ['@scripts/blocks/map/map', '@styles/blocks/office-map'],
      slider: ['@scripts/blocks/slider'],
    })

    /**
     * Directory contents to be included in the compilation
     */
    .assets([
      "images",
      "fonts"
    ])

    /**
     * Matched files trigger a page reload when modified
     */
    .watch(["resources/views/ **/*", "app/** /*"])

    /**
     * Proxy origin (`WP_HOME`)
     */
    .proxy("http://sitecorp.test")

    /**
     * Development origin
     */
    .serve("http://0.0.0.0:3000")

    /**
     * URI of the `public` directory
     */
    .setPublicPath("/assets/themes/site/public/")

    /**
     * Provide $ for jQuery
     */
    .provide({
      jquery: '$'
    })

    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     */
    .wpjson
    .settings({
      blocks: {
        'core/button': {
          typography: {
            fontSizes: {},
          },
          border: {
            radius: false,
          },
          color: {
            background: {}, // TODO Check, this is not working somehow
            text: false,
          },
          spacing: {
            padding: false,
          }
        },
        'core/paragraph': {
          typography: {
            fontWeight: true,
          },
        },
        'core/heading': {
          typography: {
            fontWeight: true,
          },
        },
        'core/post-title': {
          typography: {
            fontWeight: true,
          },
          'core/post-terms': {
            typography: {
              fontWeight: true,
            },
          }
        }
      },
      layout: {
        contentSize: 'var(--site-width-content)',
        wideSize: 'var(--site-width-wide)',
      },
      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: {
        dropCap: false,
        customFontSize: false,
        letterSpacing: false,
        fontWeight: false,
        fontSizes: [
          {
            'name': 'Small',
            'size': 'var(--site-fontsize-sm)',
            'slug': 'sm'
          },
          {
            'name': 'Normal',
            'size': 'var(--site-fontsize-base)',
            'slug': 'base'
          },
          {
            'name': 'Large',
            'size': 'var(--site-fontsize-lg)',
            'slug': 'lg'
          },
          {
            'name': 'Extra Large',
            'size': 'var(--site-fontsize-xl)',
            'slug': 'xl'
          },
          {
            'name': 'Huge',
            'size': 'var(--site-fontsize-2xl)',
            'slug': '2xl'
          },
          {
            'name': 'Extra Huge',
            'size': 'var(--site-fontsize-3xl)',
            'slug': '3xl'
          },
          {
            'name': 'Gigantic',
            'size': 'var(--site-fontsize-4xl)',
            'slug': '4xl'
          }
        ],
      },
    })
    .useTailwindColors(true)
    .useTailwindFontFamily(true)
    // .useTailwindFontSize(true)
    .enable();
};
```

---

## Post 2 by @robroy90 — 2022-11-30T10:24:05Z

> [@philipp](#):
>
> `setPublicPath`

Hi,  
had a similar problem and writing it like this fixed it for me

```
.provide({
      jquery: ["jQuery", "$"],
})
```

---

## Post 3 by @kellymears — 2022-11-30T10:53:18Z

Confirmed that it should be fine with array values. Added fix & unit test for string values:

> <https://github.com/roots/bud/pull/1911>
>
> - 🩹 fix: `bud.provide` should accept `object` with `string` values.
> - 📕 docs: u…pdate [bud.provide](https://bud.js.org/docs/bud.provide) documentation
> - 🧪 test: add unit tests for `string` and `array` values
> 
> refers:
> 
> - https://discourse.roots.io/t/how-to-use-provide-in-bud-js/24315
> 
> ## Type of change
> 
> **PATCH: backwards compatible change**
> 
> <!--
> **MAJOR: breaking change**
> **MINOR: feature**
> **PATCH: backwards compatible change**
> **NONE: internal change**
> -->
> 
> This PR includes breaking changes to the following core packages:
> 
> - none
> 
> This PR includes breaking changes to the follow extensions:
> 
> - none
> 
> ## Dependencies
> 
> ### Adds
> 
> - none
> 
> ### Removes
> 
> - none

I’ll merge that ASAP.