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