Errors when using bud-imagemin for webp in blade views

bud
,
1

Hello there!

After you made the fix for my issue and released it on the Bud v6.7.3, I’m trying to make it work on my project but I’m facing some errors I’m not quite understanding.

I also tried this on a new fresh Sage theme and things worked, so this has to do with my project.

Firstly, I upgraded all the Bud dependecies to 6.7.3 (from 6.6.10). dev and build work fine.
Then, I added my view path to the bud.entry:

app.entry({
  app: ['@scripts/app.js', '@styles/app.scss'],
  index: ['views/partials/home/about']
})

Still, without any changes to the file, dev and build work fine.

Then, I tried adding this inside <picture> to the about.blade.php file:

<source srcset="@asset('/images/home/about/mobile-about-section.jpg?as=webp')" type="image/webp" media="(max-width: 767px)">

Now, when I run yarn dev I get this:

/Users/erip2/Documents/my-project/dev/public/app/themes/my-theme/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

yarn build shows these errors:

✘  sage ./public [8ac304edfa27cb5148e3]
│
├─ ✘ error
│  Can't resolve '/images/home/about/mobile-about-section.jpg) alt={{ __(Homepage about us decorative image' in './resources/views/partials/home'
│
├─ ✘ error
│  Can't resolve '/images/home/about/mobile-about-section.jpg) type=image/jpeg media=(max-width: 767px' in './resources/views/partials/home'
│
├─ ✘ error
│  Cannot read properties of undefined (reading 'get')
│
│
├─ ✘ error
│  Can't find 'webp) type=image/webp media=(max-width: 767px' preset in the 'generator' option

Tell me if more information should be provided (.budfiles)

Note: The webp generator of bud-imagemin works perfectly for css.

2

Run it again with the --force flag: yarn bud build --force.

It seems like there is something funky going on with the caching for assets run through image minimizer. It’s possible that this is something we should be handling differently (we flag found assets as dependencies of the blade module here) or an upstream bug. I’m really not sure. But --force will invalidate the module cache and rectify the issue for now.

3

Unfortunately the same errors are shown.

4

Unfortunately, I can’t reproduce this behavior. From a stock roots/sage installation (with @roots/bud-imagemin):

bud.config.js:

export default async (app) => {
  app
    .entry({
      app: ['@scripts/app', '@styles/app', '@views/layouts/app'],
      editor: ['@scripts/editor', '@styles/editor'],
    })
    // ...
}

layouts/app.blade.php:

<img src="@asset('/images/404.png?as=webp')" />

Then, after running yarn bud build:

manifest.json

{
  "app.css": "css/app.9fa18c.css",
  "app.js": "js/app.9b917c.js",
  "editor.css": "css/editor.31d6cf.css",
  "editor.js": "js/editor.3305fb.js",
  "runtime.js": "js/runtime.06fab3.js",
  "js/259.7edc5d.js": "js/259.7edc5d.js",
  "images/404.png?as=webp": "images/generated.404@3840x1078.7bb3cb.webp",
  "images/404.png?as=webp&width=3840": "images/generated.404@3840x1078.7bb3cb.webp",
  "images/404.png?as=webp&width=3840&height=1078": "images/generated.404@3840x1078.7bb3cb.webp"
}

compiled view:

<img src="<?= \Roots\asset('/images/404.png?as=webp'); ?>" />
<?php /**PATH /srv/bedrock/web/app/themes/sage/resources/views/layouts/app.blade.php ENDPATH**/ ?>

rendered html:

<div id="app">
  <img src="http://example.test/app/themes/sage/public/images/generated.404@3840x1078.7bb3cb.webp">
</div>

Are you sure /images/home/about/mobile-about-section.jpg is the correct path?

6

Nevermind, I could reproduce with your exact HTML.

I think this will be solved by this change to the regular expression that isolates the asset path:

I also think the caching issue is solved by:

  • adding the blade partial as a buildDependency (I assumed this was implied but I was evidently mistaken)
  • adding the resolved asset path as a buildDependency (previously, it was marked as a dependency).
7

This fix is in the new nightly release, if you want to give it a shot:

  • yarn add @roots/bud@2023.0.30
  • npm i @roots/bud@2023.0.30
8

Can confirm that it works fine with Bud 6.8.0.

Thank you very much :smiley:

1 Like