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

bud
, ,
1

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?

2

@erip2 have you found a solution?

3

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?

4

@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.

5

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.

2 Likes
6

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…

7

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

8

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

image
image1668×696 51.3 KB

9

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
10

Bingo – this works now thank you!

2 Likes