Using [hash] as directory in rollup assetFileNames incompatible with astro:assets

[reupen]

Astro Info

Astro                    v3.2.2
Node                     v18.18.0
System                   Windows (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

n/a

Describe the Bug

Configuring vite.build.rollupOptions.output.assetFileNames to something like 'assets/[hash]/[name][extname]' and using Image from astro:assets results in an error during production builds.

An example error is:

 generating optimized images 
 error   ENOENT: no such file or directory, open 'F:\Web\astro-repros\dist\assets\red-square.png'

Configuring build.assets doesn't help here (as [hash] is missing from the path, and you can't add it in using build.assets).

Note:

• there is no problem when using a plain <img> element
• there is no problem when using the dev server
• this wasn't failing with Astro 2.x and @astrojs/image (though it didn't respect assetFileNames for the converted images)

The repro is on GitHub as StackBlitz seems to hang during generating optimized images.

What's the expected result?

This should work, preferably automatically, but failing that with further manual configuration.

Link to Minimal Reproducible Example

https://github.com/reupen/astro-repros

Participation

• I am willing to submit a pull request for this issue.

[pateljoel]

Can confirm that this is happening for me as well.

[u3u]

I use the tailwind integration, there is only one global CSS file, but I found that its file name is about.[hash].css, so I want to customize the CSS file name through vite.build.rollupOptions.output.assetFileNames, but when I set it, a build error occurs.

rollupOptions: {
  output: {
    assetFileNames: (chunkInfo) => {
      if (chunkInfo.name?.endsWith('.css')) return 'assets/tailwind.[hash].css';

      return 'assets/[name].[hash][extname]';
    },
  },
},