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

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

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();
};

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

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

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

Iโ€™ll merge that ASAP.

3 Likes