Upgrading Bud from 5.5.0 to 5.8.7 shows error "Uncaught ReferenceError: require is not defined"

Hello there!

I’m trying to updrade bud from 5.5.0 to 5.8.7. This is my bud.config.js:

const path = require('path')
require('dotenv').config({ path: path.resolve(__dirname, '../../../.env') })

const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin')
const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin')

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} config
 */

module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['@scripts/app.js', '@styles/app.scss']
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets([app.path('@src/images')])
    .assets([app.path('@src/fonts')])

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch([
      'tailwind.config.js',
      'resources/views/**/*.blade.php',
      'app/View/**/*.php'
    ])

    /**
     * Define the public path for dynamically imported assets.
     *
     * I am defining it an .env file and accessing it with `bud.env`.
     */
    .define({
      ASSET_PATH: JSON.stringify(process.env.ASSET_PATH)
    })

    .setPublicPath('')

    .persist('memory')

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
    .proxy(process.env.WP_HOME)

    .use(
      new SVGSpritemapPlugin('resources/sprite/*.svg', {
        output: {
          filename: 'spritesheet.svg',
          chunk: { keep: true },
          svgo: false
        }
      })
    )

    .use(new ImageminWebpWebpackPlugin())

    .tap((app) => {
      app.postcss.setPlugin(
        'postcss-color-mod-function',
        require.resolve('postcss-color-mod-function')
      )
      app.postcss.setPlugin(
        'postcss-pxtorem',
        require.resolve('postcss-pxtorem')
      )
    })

    /**
     * Development URL
     */
    .serve(`${process.env.WP_HOME}:3000`)
}

The only changes I made are the .assets() and added .persist('memory').

The problem I have is that when I use the lodash.debounce the error Uncaught ReferenceError: require is not defined is shown since this file uses require. Is there a problem with bud config?

Thank you!

Edit: I know that there is also version 6.0.0 of Bud but that seemed like a lot of changes for now. Do you recommend upgrading to this in my case?

@erip2 have you found a solution?

Nope. Since I had and still have to do other things in the project, I downgraded again to 5.5.0 to continue working. I will get to this at a later moment, maybe trying with the 6.0.0 version.

Did something similar happen to you?

@erip2 it did happen.

I added a dependency (GitHub - igorescobar/jQuery-Mask-Plugin: A jQuery Plugin to make masks on form fields and HTML elements.) to the package.json file and this dependency uses the require syntax.
Then when I tried to build the assets I’d get the error Uncaught ReferenceError: require is not defined.

I tried a few approaches but nothing worked. I ended up using another dependency.

This is probably the result of a dependency which has required jquery or lodash source (as opposed to compiled modules). The ideal would be for the package maintainer to compile their code before publishing it on npm.

I don’t have quite enough information to know 100% that this is the problem, but I suspect it is and I also suspect you can fix this in 5.x.x with the following:

bud.hooks.on('build.module.noParse', undefined)

The assumption of bud@5 that node_modules would be compiled in advance turned out to be overly optimistic. This default is changed in bud@6 to the above.

1 Like

Hi
I’m trying to install purgecss-with-wordpress using bud 6.3.3 and the following code from the bud docs:

 .purgecss({
      content: [app.path('resources/views/**')],
      safelist: [...require('purgecss-with-wordpress').safelist],
    })

and I get the following error:

ReferenceError: require is not defined 

Thanks for any advise…

Is there a reason you’re trying to use purge-css-with-wordpress instead of bud-purgecss?

Hi Ben
I don’t know :smiley:
I just did as it says in the docs (the link you just shared)

Ah my bad! We need to update the docs after the switch to ESM. Can you please give this a shot?

At the top of your Bud config, add:

import purgeCssWordPress from 'purgecss-with-wordpress'

Then further within the config:

...
    .purgecss({
      content: [app.path('resources/views/**')],
      safelist: [...purgeCssWordPress.safelist],
    })
...
1 Like

Bingo – this works now thank you!

2 Likes