@Assets not working after upgrading Bud in production

bud
1

Hi,

Urls using @asset (e.g., @asset('images/imageFile.svg')) started returning 404 errors after upgrading Bud from 5.7.2 to 6.3.5. Images work fine in development but not in the production build after deploying with Trellis.

package.json before update:

{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @wordpress/browserslist-config"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "npm run translate:pot && npm run translate:js",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print"
  },
  "devDependencies": {
    "@roots/bud": "5.7.2",
    "@roots/bud-tailwindcss": "5.7.2",
    "@roots/sage": "5.7.2"
  }
}

Current:

{
  "name": "sage",
  "private": true,
  "engines": {
    "node": ">=16.0.0"
  },
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "npm run translate:pot && npm run translate:js",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "lint": "npm run lint:js && npm run lint:css",
    "lint:js": "eslint resources/scripts",
    "lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",
    "test": "npm run lint"
  },
  "devDependencies": {
    "@roots/browserslist-config": "6.3.5",
    "@roots/bud": "6.3.5",
    "@roots/bud-eslint": "^6.3.5",
    "@roots/bud-tailwindcss": "6.3.5",
    "@roots/bud-vue": "6.3.5",
    "@roots/sage": "6.3.5"
  },
  "dependencies": {}

bud.config.mjs:

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
 export default async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets('images')

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch('resources/views/**/*', 'app/**/*')

    /**
     * Target URL to be proxied by the dev server.
     *
     * This should be the URL you use to visit your local development server.
     */
     .proxy('http://example.test')

     /**
      * Development URL to be used in the browser.
      */
     .serve('http://0.0.0.0:64912'); 
}

Any idea what could. be causing this?

2

“Doesn’t work” is not an actionable problem, so please help us to understand how it “doesn’t work.” A good start is answering the following questions:

  • What did you expect to happen?
  • What happened instead?
  • If you saw errors, what were they? Where did they appear (i.e. the JavaScript console; the command line; the server logs; etc)?
3

These are all good questions. Another one:

Images work fine in development but not in the production build after deploying with Trellis.

Does that mean the production build works locally?

4

For clarification I meant “staging” rather than “production”. Right now we have development and staging.

The images that used @asset(images/fileName.svg) in the src started appending hash to the file names (i.e., images/logo.683be6.png) in staging after upgrading to 6.3.5.

Images are not hashed and are displayed as expected when running locally (yarn dev) but not on the staging site after doing doing a trellis provision and deploy.

It was not doing that prior to upgrading from 5.7.2 and images were loading properly in staging. Now, images with the added hash in staging aren’t loading and 404 errors were being displayed in the JavaScript console when trying to load those images.

5
  • I think I must have been unclear: if you run yarn bud build and look at the site locally – is it behaving as expected?
  • What is the error in the console? Copy the actual error message (including the path it is trying to load).
  • What version of Acorn are you using?

The images that used @asset(images/fileName.svg)

  • are there images in use that don’t use @asset? if so, are these the images that are failing to load? Do any of the images load?

I use trellis/bedrock/sage/bud on several production sites and don’t have this problem. I also field a lot of support requests and have never encountered this problem before. So, the question is: what are you doing differently that is causing this?

You can always disable hashing: