output.assetFileNames does not work when the project use @vitejs/plugin-legacy

[JR93]

Describe the bug

When the project use [email protected] and @vitejs/plugin-legacy, output.assetFileNames does not work, and the polyfills-legacy file is outside the js directory. But it works well when remove @vitejs/plugin-legacy.

vite.config.js:

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import legacy from '@vitejs/plugin-legacy'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh(), legacy()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'assets/js/[name]-[hash].js',
        chunkFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: assetInfo => {
          if (/\.css$/.test(assetInfo.name)) {
            return 'assets/css/[name]-[hash][extname]'
          }
          return 'assets/img/[name]-[hash][extname]'
        }
      }
    }
  }
})

Because @vitejs/plugin-legacy will create and add an output configuration

packages/plugin-legacy/index.js#L219:

const { rollupOptions } = config.build
const { output } = rollupOptions
if (Array.isArray(output)) {
  rollupOptions.output = [...output.map(createLegacyOutput), ...output]
} else {
  rollupOptions.output = [createLegacyOutput(output), output || {}]
}

When rollupOptions.output is an array, it defaults to '<assetsDir>/[name].[hash][extname]'

packages/vite/src/node/plugins/asset.ts#L309:

const output = config.build?.rollupOptions?.output
const assetFileNames =
  (output && !Array.isArray(output) ? output.assetFileNames : undefined) ??
  // defaults to '<assetsDir>/[name].[hash][extname]'
  // slightly different from rollup's one ('assets/[name]-[hash][extname]')
  path.posix.join(config.build.assetsDir, '[name].[hash][extname]')

Reproduction

https://github.com/JR93/vite-asset-filenames-legacy-bug

System Info

System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz   
    Memory: 8.68 GB / 15.89 GB
  Binaries:
    Node: 12.16.3 - C:\Program Files\nodejs\node.EXE       
    Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD       
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.73)
    Internet Explorer: 11.0.19041.906
  npmPackages:
    vite: ^2.5.0-beta.3 => 2.5.0

Used Package Manager

yarn

Logs

$ vite build
vite v2.5.0 building for production...
✓ 27 modules transformed.
dist/assets/js/index-legacy-21b357f9.js    2.88 KiB / brotli: 1.27 KiB
dist/assets/polyfills-legacy.7969d14b.js   53.90 KiB / brotli: 19.53 KiB
dist/assets/js/vendor-legacy-8de15e13.js   127.96 KiB / brotli: 36.34 KiB
dist/assets/favicon.17e50649.svg     1.49 KiB
dist/assets/logo.ecc203fb.svg        2.61 KiB
dist/index.html                      1.59 KiB
dist/assets/css/index-d93758c6.css   0.77 KiB / brotli: 0.41 KiB
dist/assets/js/index-a1c55ec7.js     1.66 KiB / brotli: 0.68 KiB
dist/assets/js/vendor-9c242a8b.js    127.61 KiB / brotli: 36.05 KiB

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[YuYang019]

I got the same problem and I found a related issue: #4221

[keith0305]

I got the same issue, any known workaround for this?

[ygj6]

In fact, the affected output files are static resource files and special polyfills-legacy files, for static resource files, they are referenced by chunks in all outputs, and for polyfills-legacy files, it is the SystemJS runtime generated when rollupOptions.output.format is system, and it is referenced by legacy chunks in all outputs.

So they are behaviors that occur when you set output options to multiple outputs options, and you can think of them as "public" and it is not necessary to package them into different output directories (plugin-legacy generates multiple outputs).

[mingyuyuyu]

yeah，its issue for me， its not plugin-legacy problem，when output is array，it does not work because plugins/assets.ts take a default assetFileName. i think it's bad, can provide a config to set custom asset name when output is array?
@yyx990803

[vamsidotdev]

Same issue for me. Has anyone found a workaround for this?

[paina-ma]

mark

[mingyuyuyu]

i resolve this issue, it can write a plugin to resolve it

[Magisk2]

i also want to know how solved it. Can you talk about it? thank's

[shinjie1210]

i resolve this issue, it can write a plugin to resolve it

can you talk about how to resolve this? tks

[mingyuyuyu]

maybe you can use this plugin to edit assets file name

export default () => {
  let config

  return {
    apply: 'build',
    enforce: 'pre',

    configResolved(cf) {
      config = cf;
    },

    async resolveId(id, importer, options) {
      if (config.assetsInclude(id)) {
        const resolution = await this.resolve(id, importer, { skipSelf: true, ...options });
        if (!resolution) return null;

        // you can get current asset url
        const { id: url } = resolution;
        // you can write new url name by return val
        return xxxx;
      }
      return null
    },
  }
}

[shinjie1210]

i resolve this issue, it can write a plugin to resolve it

can you talk about how to resolve this? tks

thanks a lot