# Errors when using bud-imagemin for webp in blade views

**URL:** https://discourse.roots.io/t/errors-when-using-bud-imagemin-for-webp-in-blade-views/24665
**Category:** bud
**Tags:** bud, sage10
**Created:** 2023-01-27T10:46:31Z
**Posts:** 8

## Post 1 by @erip2 — 2023-01-27T10:46:32Z

Hello there!

After you made the fix for my [issue](https://github.com/roots/bud/issues/2006) 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.

---

## Post 2 by @kellymears — 2023-01-27T21:17:42Z

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](https://github.com/roots/bud/blob/f45ca6eacfb95b173548e5ad61eae782d8364e81/sources/%40roots/blade-loader/src/asset-loader.cts#L15)) or an upstream bug. I’m really not sure. But `--force` will invalidate the module cache and rectify the issue for now.

---

## Post 3 by @erip2 — 2023-01-28T13:28:35Z

Unfortunately the same errors are shown.

---

## Post 4 by @kellymears — 2023-01-28T21:30:05Z

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?

---

## Post 6 by @kellymears — 2023-01-28T22:44:16Z

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:

> <https://github.com/roots/bud/pull/2065/files#diff-0d770b2c2b8f1b9151da1573b48b66598e354b6d7b74ac549a6cebbf6e54ae7bR9>
>
> - 🩹 fix: blade loader caching
> 
> refers:
> 
> - none
> 
> ## Type of change
> 
> **PAT…CH: backwards compatible change**
> 
> <!--
> **MAJOR: breaking change**
> **MINOR: feature**
> **PATCH: backwards compatible change**
> **NONE: internal change**
> -->
> 
> This PR includes breaking changes to the following core packages:
> 
> - none
> 
> This PR includes breaking changes to the follow extensions:
> 
> - none
> 
> ## Dependencies
> 
> ### Adds
> 
> - none
> 
> ### Removes
> 
> - none

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`).

---

## Post 7 by @kellymears — 2023-01-30T05:09:13Z

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`

> **[@roots/bud](https://www.npmjs.com/package/@roots/bud/v/2023.0.30)**
>
> Frontend build tools combining the best parts of Symfony Encore and Laravel Mix. Latest version: 6.7.3, last published: 4 days ago. Start using @roots/bud in your project by running `npm i @roots/bud`. There are 4 other projects in the npm registry...

---

## Post 8 by @erip2 — 2023-02-03T15:14:13Z

Can confirm that it works fine with Bud 6.8.0.

Thank you very much :smiley: