Problems upgrading Bud from 5.4.0 to 5.7.0

bud
,
1

I’m trying to upgrade Bud in a Sage 10 theme, but I’m getting some problems that I don’t understand. I’ve read the upgrade guides, so I believe that things are ok in my bud config:

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

const SVGSpritemapPlugin = require('svg-spritemap-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', '@styles/app']
    })

    /**
     * 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(['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('')

    /**
     * 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
        }
      })
    )

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

What I get in the terminal is these errors:

Module not found: Error: Can't resolve '@scripts/app' in '/Users/eripanci/Documents/sage-site/dev/public/app/themes/sage-theme'
Module not found: Error: Can't resolve '@styles/app' in '/Users/eripanci/Documents/sage-site/dev/public/app/themes/sage-theme'

I see that on the webpack.config.js in the resolve is this:

"alias": {
      "@src": "/Users/erip2/Documents/sage-site/dev/public/app/themes/sage-theme/src",
      "@dist": "/Users/erip2/Documents/sage-site/dev/public/app/themes/sage-theme/dist",
      "@fonts": "/Users/erip2/Documents/sage-site/dev/public/app/themes/sage-theme/src/fonts",
      "@images": "/Users/erip2/Documents/sage-site/dev/public/app/themes/sage-theme/src/images",
      "@scripts": "/Users/erip2/Documents/sage-site/dev/public/app/themes/sage-theme/src/scripts",
      "@styles": "/Users/erip2/Documents/sage-site/dev/public/app/themes/sage-theme/src/styles"
    }

I don’t understand why it’s like this when it should be like this for example:

"@src": "/Users/erip2/Documents/sage-site/dev/public/app/themes/sage-theme/resources"

Can you tell by this if there’s anything wrong on my side?

P.S. Some of my config are from the discussion here: Bud - Upgrading to 5.2.0 causing problems

2

Maybe try 5.7.2?

You should be able to compare the current Bud config in Sage to your old one. Apply whatever necessary changes in order to get things running again.

4

I tried 5.7.3 but still the same.

I believe I’ve made changes according to the guides and also tried to inspect the problem with the knowledge that I have, but couldn’t come up with what is causing it.

After upgrading, I run yarn bud clean the terminal returns:

bud paths are required to be prefixed with `@`. Please convert `src` to `@src`

I don’t understand this since I don’t have any “src” on the bud config file.

Also, it creates a dist folder, it didn’t create this on 5.4.0.

6

Your config file is fine.

You don’t have to use dotenv at all anymore: bud.env.get('WP_HOME') works out-of-the-box.

I’m almost positive you have mismatched versions. Save this as checkup.js and run it (with node checkup.js):

const { globby } = require("@roots/bud-support");
const bud = require("./node_modules/@roots/bud/package.json");

globby.globby("./node_modules/@roots/*/package.json").then((files) => {
  files.forEach((file) => {
    const { name, version } = require(file);

    if (version !== bud.version) {
      console.log(
        `ERR: ${name}@${version} is not compatible with ${bud.name}@${bud.version}`
      );
    } else {
      console.log(
        `OK: ${name}@${version} is compatible with ${bud.name}@${bud.version}`
      );
    }
  });
});

What does it say?

7 
OK: @roots/bud@5.7.3 is compatible with @roots/bud@5.7.3
OK: @roots/bud-api@5.7.3 is compatible with @roots/bud@5.7.3
ERR: @roots/bud-babel@5.5.0 is not compatible with @roots/bud@5.7.3
OK: @roots/bud-build@5.7.3 is compatible with @roots/bud@5.7.3
OK: @roots/bud-compiler@5.7.3 is compatible with @roots/bud@5.7.3
OK: @roots/bud-dashboard@5.7.3 is compatible with @roots/bud@5.7.3
OK: @roots/bud-cache@5.7.3 is compatible with @roots/bud@5.7.3
ERR: @roots/bud-entrypoints@5.5.0 is not compatible with @roots/bud@5.7.3
OK: @roots/bud-eslint@5.7.3 is compatible with @roots/bud@5.7.3
OK: @roots/bud-extensions@5.7.3 is compatible with @roots/bud@5.7.3
OK: @roots/bud-framework@5.7.3 is compatible with @roots/bud@5.7.3
OK: @roots/bud-hooks@5.7.3 is compatible with @roots/bud@5.7.3
OK: @roots/bud-postcss@5.7.3 is compatible with @roots/bud@5.7.3
ERR: @roots/bud-preset-recommend@5.5.0 is not compatible with @roots/bud@5.7.3
ERR: @roots/bud-preset-wordpress@5.5.0 is not compatible with @roots/bud@5.7.3
OK: @roots/bud-prettier@5.7.3 is compatible with @roots/bud@5.7.3
ERR: @roots/bud-react@5.5.0 is not compatible with @roots/bud@5.7.3
OK: @roots/bud-sass@5.7.3 is compatible with @roots/bud@5.7.3
OK: @roots/bud-server@5.7.3 is compatible with @roots/bud@5.7.3
OK: @roots/bud-stylelint@5.7.3 is compatible with @roots/bud@5.7.3
OK: @roots/bud-support@5.7.3 is compatible with @roots/bud@5.7.3
OK: @roots/bud-tailwindcss@5.7.3 is compatible with @roots/bud@5.7.3
ERR: @roots/bud-wordpress-dependencies@5.5.0 is not compatible with @roots/bud@5.7.3
ERR: @roots/bud-wordpress-externals@5.5.0 is not compatible with @roots/bud@5.7.3
ERR: @roots/bud-wordpress-manifests@5.5.0 is not compatible with @roots/bud@5.7.3
OK: @roots/container@5.7.3 is compatible with @roots/bud@5.7.3
OK: @roots/dependencies@5.7.3 is compatible with @roots/bud@5.7.3
ERR: @roots/entrypoints-webpack-plugin@5.5.0 is not compatible with @roots/bud@5.7.3
ERR: @roots/merged-manifest-webpack-plugin@5.5.0 is not compatible with @roots/bud@5.7.3
ERR: @roots/sage@5.5.0 is not compatible with @roots/bud@5.7.3
ERR: @roots/wordpress-dependencies-webpack-plugin@5.5.0 is not compatible with @roots/bud@5.7.3
ERR: @roots/wordpress-externals-webpack-plugin@5.5.0 is not compatible with @roots/bud@5.7.3
8

ERR: @roots/sage@5.5.0 is not compatible with @roots/bud@5.7.3

Looks like you need to update @roots/sage. Always ensure the @roots/* packages have the same version number.