assetFileName invalid while use legacy plugin/使用legacy插件后rollup的assetFileNames设置失效 #6923

shinjie1210 · 2022-02-15T03:04:21Z

Describe the bug

while i write vite config' build module include

rollupOptions: {
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }

my outdir file will bundle correct like

dist
-static
--css
--js
--png

and while use legacyPlugin as
legacyPlugin({ targets: ['chrome 52'], additionalLegacyPolyfills: ['regenerator-runtime/runtime'] })
in config's plugin module in same time

my outdir file wile bundle like
dist
-asset
***.png
***.legacy.js
-static
--css
--js

png filepath is not correct like css file and js file,
is this condition correct or i've just wirte wrong code in my file?
简单来说就是使用legacy插件之前,文件打包后的文件按照我的设置 js/css/png或其他格式的资源文件分别都在dist/static下的各自文件类型的文件夹里,使用legacy插件之后,png文件就直接进assets文件夹了,dist/static文件夹下不再有png的文件夹,css/js文件的文件夹还是正常的

Reproduction

https://github.com/shinjie1210/vite-config/settings

System Info

Node.js v14.18.1.
"vite": "^2.7.2"
"vue": "^3.2.25"
"@vitejs/plugin-legacy": "^1.7.1",
    "@vitejs/plugin-vue": "^2.0.0",

Used Package Manager

npm

Logs

npm i 
npm run build 
issue cause's key code is in vite.config.js with notes

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/core 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.

The text was updated successfully, but these errors were encountered:

Magisk2 · 2022-02-17T08:04:43Z

请问你解决了嘛？我也遇到了这个问题

"vite": "^2.8.0"
"vue": "^3.2.25"
"@vitejs/plugin-legacy": "^1.7.1",
 "@vitejs/plugin-vue": "^2.2.0",

配置如下：

打包结果：

shinjie1210 · 2022-02-17T08:36:48Z

请问你解决了嘛？我也遇到了这个问题

i have search similar issue and only in #4628 someone said he fix this with other plugin ,im waiting for his reply

you can reference #4352 and #2957 and if you find a way to resolve pls tell me ,tks

shinjie1210 · 2022-02-17T09:24:41Z

请问你解决了嘛？我也遇到了这个问题
"vite": "^2.8.0"
"vue": "^3.2.25"
"@vitejs/plugin-legacy": "^1.7.1",
 "@vitejs/plugin-vue": "^2.2.0",
配置如下：打包结果：

i need to know which broswer u need to compatible with , i may find a solution but i m not convenice to test if it can
satisfy your compatible requirement

shinjie1210 · 2022-02-17T09:28:11Z

请问你解决了嘛？我也遇到了这个问题
"vite": "^2.8.0"
"vue": "^3.2.25"
"@vitejs/plugin-legacy": "^1.7.1",
 "@vitejs/plugin-vue": "^2.2.0",
配置如下：打包结果：

你应该是中文使用者吧,我的意思是你兼容的需求是什么我好像找到个办法,但是不知道适用性如何因为我只需要兼容 es.object.from-entries 来满足产品同事电脑上的chrome66,目前来看可以满足我的需求

Magisk2 · 2022-02-17T13:28:20Z

Thank you for your kind reply in Chinese. My compatibility needs are similar to yours. I don't even need to be compatible with chrome 66. Can you share your solution? Thank you very much

shinjie1210 · 2022-02-18T02:06:16Z

Thank you for your kind reply in Chinese. My compatibility needs are similar to yours. I don't even need to be compatible with chrome 66. Can you share your solution? Thank you very much

try this,it fix my problem,i dont know wheather this can fix you problem, if this work pls let me know tks

modernPolyfills: ['the polyfill module you need'], //or u can just set modernPolyfills:true, true to make it universal
renderLegacyChunks: false,

Magisk2 · 2022-02-18T02:41:23Z

Yes, it also fix my problem,tks

Magisk2 · 2022-02-18T03:30:13Z

I think I may have found another solution，line 4543 of the node_modules/vite/dist/chunks/dep-f9d9421a.js （Source file：https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/asset.ts）

change path__default.posix.join(config.build.assetsDir, '[name].[hash][extname]') to path__default.posix.join(output[1]?.assetFileNames?.split('/')[0]||config.build.assetsDir, '[ext]/[name].[hash][extname]')

reason：
After using legacy plugin,this plugin will merge build.rollupOptions width his own ，The final output is always an array，as follows[ { chunkFileNames: [Function (anonymous)], entryFileNames: [Function (anonymous)], assetFileNames: 'static/[ext]/[name]-[hash][extname]', format: 'system' }, { chunkFileNames: 'static/js/[name]-[hash].js', entryFileNames: 'static/js/[name]-[hash].js', assetFileNames: 'static/[ext]/[name]-[hash][extname]' } ] or
[ { chunkFileNames: [Function (anonymous)], entryFileNames: [Function (anonymous)], assetFileNames: 'static/[ext]/[name]-[hash][extname]', format: 'system' }, {} ]
so (output && !Array.isArray(output) ? output.assetFileNames : undefined) ??path.posix.join(config.build.assetsDir, '[name].[hash][extname]') will execute path.posix.join(config.build.assetsDir, '[name].[hash][extname]')，This causes the configured assetfilenames to become invalid.
I just did a simple test of this scheme, which seems to work well in my local area.`

Here are some of my test results：

use legacy and build.rollupOptions.ouput
only use legacy
only use build.rollupOptions.ouput

Jungzl · 2022-02-18T07:54:34Z

@shinjie1210

{
      build: {
        assetsDir: 'static/js',
        rollupOptions: {
          output: {
            chunkFileNames: 'static/js/[name]-[hash].js',
            entryFileNames: 'static/js/[name]-[hash].js',
            assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
            manualChunks(id) {
              if (id.includes('node_modules')) {
                return id.toString().split('node_modules/')[1].split('/')[0].toString()
              }
            },
          },
        },
      },
    }

maybe helps if you don't need renderLegacyChunks 😀

Magisk2 · 2022-02-18T09:02:19Z

@shinjie1210

{
      build: {
        assetsDir: 'static/js',
        rollupOptions: {
          output: {
            chunkFileNames: 'static/js/[name]-[hash].js',
            entryFileNames: 'static/js/[name]-[hash].js',
            assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
            manualChunks(id) {
              if (id.includes('node_modules')) {
                return id.toString().split('node_modules/')[1].split('/')[0].toString()
              }
            },
          },
        },
      },
    }

maybe helps😀

amazing，This should be the best solution， We think the problem is complicated。

shinjie1210 · 2022-02-18T09:26:08Z

@shinjie1210

{
      build: {
        assetsDir: 'static/js',
        rollupOptions: {
          output: {
            chunkFileNames: 'static/js/[name]-[hash].js',
            entryFileNames: 'static/js/[name]-[hash].js',
            assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
            manualChunks(id) {
              if (id.includes('node_modules')) {
                return id.toString().split('node_modules/')[1].split('/')[0].toString()
              }
            },
          },
        },
      },
    }

maybe helps if you don't need renderLegacyChunks 😀

yeah i try this,that's a clever thoughts,tks

shinjie1210 · 2022-02-18T09:30:12Z

I think I may have found another solution，line 4543 of the node_modules/vite/dist/chunks/dep-f9d9421a.js （Source file：https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/asset.ts）

change path__default.posix.join(config.build.assetsDir, '[name].[hash][extname]') to path__default.posix.join(output[1]?.assetFileNames?.split('/')[0]||config.build.assetsDir, '[ext]/[name].[hash][extname]')

reason： After using legacy plugin,this plugin will merge build.rollupOptions width his own ，The final output is always an array，as follows[ { chunkFileNames: [Function (anonymous)], entryFileNames: [Function (anonymous)], assetFileNames: 'static/[ext]/[name]-[hash][extname]', format: 'system' }, { chunkFileNames: 'static/js/[name]-[hash].js', entryFileNames: 'static/js/[name]-[hash].js', assetFileNames: 'static/[ext]/[name]-[hash][extname]' } ] or [ { chunkFileNames: [Function (anonymous)], entryFileNames: [Function (anonymous)], assetFileNames: 'static/[ext]/[name]-[hash][extname]', format: 'system' }, {} ] so (output && !Array.isArray(output) ? output.assetFileNames : undefined) ??path.posix.join(config.build.assetsDir, '[name].[hash][extname]') will execute path.posix.join(config.build.assetsDir, '[name].[hash][extname]')，This causes the configured assetfilenames to become invalid. I just did a simple test of this scheme, which seems to work well in my local area.`

Here are some of my test results：

use legacy and build.rollupOptions.ouput

only use legacy

only use build.rollupOptions.ouput

yeah i think that's the reason cause our problem but i dont understand your solution in this comment like

change path__default.posix.join(config.build.assetsDir, '[name].[hash][extname]') to path__default.posix.join(output[1]?.assetFileNames?.split('/')[0]||config.build.assetsDir, '[ext]/[name].[hash][extname]')

can u tell me how to do?tks

Magisk2 · 2022-02-18T10:12:29Z

I think I may have found another solution，line 4543 of the node_modules/vite/dist/chunks/dep-f9d9421a.js （Source file：https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/asset.ts）
change path__default.posix.join(config.build.assetsDir, '[name].[hash][extname]') to path__default.posix.join(output[1]?.assetFileNames?.split('/')[0]||config.build.assetsDir, '[ext]/[name].[hash][extname]')
reason： After using legacy plugin,this plugin will merge build.rollupOptions width his own ，The final output is always an array，as follows[ { chunkFileNames: [Function (anonymous)], entryFileNames: [Function (anonymous)], assetFileNames: 'static/[ext]/[name]-[hash][extname]', format: 'system' }, { chunkFileNames: 'static/js/[name]-[hash].js', entryFileNames: 'static/js/[name]-[hash].js', assetFileNames: 'static/[ext]/[name]-[hash][extname]' } ] or [ { chunkFileNames: [Function (anonymous)], entryFileNames: [Function (anonymous)], assetFileNames: 'static/[ext]/[name]-[hash][extname]', format: 'system' }, {} ] so (output && !Array.isArray(output) ? output.assetFileNames : undefined) ??path.posix.join(config.build.assetsDir, '[name].[hash][extname]') will execute path.posix.join(config.build.assetsDir, '[name].[hash][extname]')，This causes the configured assetfilenames to become invalid. I just did a simple test of this scheme, which seems to work well in my local area.`
Here are some of my test results：

use legacy and build.rollupOptions.ouput

only use legacy

only use build.rollupOptions.ouput

yeah i think that's the reason cause our problem but i dont understand your solution in this comment like

change path__default.posix.join(config.build.assetsDir, '[name].[hash][extname]') to path__default.posix.join(output[1]?.assetFileNames?.split('/')[0]||config.build.assetsDir, '[ext]/[name].[hash][extname]')

can u tell me how to do?tks

这一行代码是vite下面 asset.ts文件filetobuilturl函数中的，修改这一行代码的意图是将vite.config.js中assetfilenames前面的static提取出来，并用它作为输出目录，如果没有配置assetfilenames再使用原来代码中的默认值（assets），这样外面配置的assetfilenames就不会失效，类似于修改vite.config.js中的assetsDir。

shinjie1210 · 2022-02-25T01:58:22Z

I think I may have found another solution，line 4543 of the node_modules/vite/dist/chunks/dep-f9d9421a.js （Source file：https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/asset.ts）
change path__default.posix.join(config.build.assetsDir, '[name].[hash][extname]') to path__default.posix.join(output[1]?.assetFileNames?.split('/')[0]||config.build.assetsDir, '[ext]/[name].[hash][extname]')
reason： After using legacy plugin,this plugin will merge build.rollupOptions width his own ，The final output is always an array，as follows[ { chunkFileNames: [Function (anonymous)], entryFileNames: [Function (anonymous)], assetFileNames: 'static/[ext]/[name]-[hash][extname]', format: 'system' }, { chunkFileNames: 'static/js/[name]-[hash].js', entryFileNames: 'static/js/[name]-[hash].js', assetFileNames: 'static/[ext]/[name]-[hash][extname]' } ] or [ { chunkFileNames: [Function (anonymous)], entryFileNames: [Function (anonymous)], assetFileNames: 'static/[ext]/[name]-[hash][extname]', format: 'system' }, {} ] so (output && !Array.isArray(output) ? output.assetFileNames : undefined) ??path.posix.join(config.build.assetsDir, '[name].[hash][extname]') will execute path.posix.join(config.build.assetsDir, '[name].[hash][extname]')，This causes the configured assetfilenames to become invalid. I just did a simple test of this scheme, which seems to work well in my local area.`
Here are some of my test results：

use legacy and build.rollupOptions.ouput

only use legacy

only use build.rollupOptions.ouput

yeah i think that's the reason cause our problem but i dont understand your solution in this comment like
change path__default.posix.join(config.build.assetsDir, '[name].[hash][extname]') to path__default.posix.join(output[1]?.assetFileNames?.split('/')[0]||config.build.assetsDir, '[ext]/[name].[hash][extname]')
can u tell me how to do?tks

这一行代码是vite下面 asset.ts文件filetobuilturl函数中的，修改这一行代码的意图是将vite.config.js中assetfilenames前面的static提取出来，并用它作为输出目录，如果没有配置assetfilenames再使用原来代码中的默认值（assets），这样外面配置的assetfilenames就不会失效，类似于修改vite.config.js中的assetsDir。

that make sence , i finally understand this ,Thank you for your kind reply in Chinese

sapphi-red · 2022-05-20T17:53:03Z

Closing as it is a duplicate of #4628

shinjie1210 added the pending triage label Feb 15, 2022

bluwy added the plugin: legacy label Feb 15, 2022

shinjie1210 changed the title ~~assetFileName invalid while use legacy plugin~~ assetFileName invalid while use legacy plugin/使用legacy插件后rollup的assetFileNames设置失效 Feb 15, 2022

famoser mentioned this issue Apr 13, 2022

Web Worker imports don't respect rollupOptions.output.assetFileNames on build #7613

Closed

sapphi-red closed this as not planned Won't fix, can't repro, duplicate, stale May 20, 2022

github-actions bot locked and limited conversation to collaborators Jun 4, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

assetFileName invalid while use legacy plugin/使用legacy插件后rollup的assetFileNames设置失效 #6923

assetFileName invalid while use legacy plugin/使用legacy插件后rollup的assetFileNames设置失效 #6923

shinjie1210 commented Feb 15, 2022 •

edited by bluwy

Loading

Magisk2 commented Feb 17, 2022 •

edited

Loading

shinjie1210 commented Feb 17, 2022

shinjie1210 commented Feb 17, 2022

shinjie1210 commented Feb 17, 2022

Magisk2 commented Feb 17, 2022

shinjie1210 commented Feb 18, 2022

Magisk2 commented Feb 18, 2022

Magisk2 commented Feb 18, 2022 •

edited

Loading

Jungzl commented Feb 18, 2022 •

edited

Loading

Magisk2 commented Feb 18, 2022 •

edited

Loading

shinjie1210 commented Feb 18, 2022

shinjie1210 commented Feb 18, 2022

Magisk2 commented Feb 18, 2022 •

edited

Loading

shinjie1210 commented Feb 25, 2022

sapphi-red commented May 20, 2022

assetFileName invalid while use legacy plugin/使用legacy插件后rollup的assetFileNames设置失效 #6923

assetFileName invalid while use legacy plugin/使用legacy插件后rollup的assetFileNames设置失效 #6923

Comments

shinjie1210 commented Feb 15, 2022 • edited by bluwy Loading

Describe the bug

Reproduction

System Info

Used Package Manager

Logs

Validations

Magisk2 commented Feb 17, 2022 • edited Loading

shinjie1210 commented Feb 17, 2022

shinjie1210 commented Feb 17, 2022

shinjie1210 commented Feb 17, 2022

Magisk2 commented Feb 17, 2022

shinjie1210 commented Feb 18, 2022

Magisk2 commented Feb 18, 2022

Magisk2 commented Feb 18, 2022 • edited Loading

Jungzl commented Feb 18, 2022 • edited Loading

Magisk2 commented Feb 18, 2022 • edited Loading

shinjie1210 commented Feb 18, 2022

shinjie1210 commented Feb 18, 2022

Magisk2 commented Feb 18, 2022 • edited Loading

shinjie1210 commented Feb 25, 2022

sapphi-red commented May 20, 2022

shinjie1210 commented Feb 15, 2022 •

edited by bluwy

Loading

Magisk2 commented Feb 17, 2022 •

edited

Loading

Magisk2 commented Feb 18, 2022 •

edited

Loading

Jungzl commented Feb 18, 2022 •

edited

Loading

Magisk2 commented Feb 18, 2022 •

edited

Loading

Magisk2 commented Feb 18, 2022 •

edited

Loading