Support `@vitejs/plugin-legacy`

[khalwat]

I'm attempting to use VitePress with the Vite plugin legacy-plugin, but on build I receive this error:

build error:
 Error: @vitejs/plugin-legacy rollupOptions.output.entryFileNames and rollupOptions.output.chunkFileNames does not support the function format.
    at getLegacyOutputFileName (/app/node_modules/@vitejs/plugin-legacy/index.js:182:17)

Here's my vite.config.js:

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        legacy({
           targets: ['defaults', 'not IE 11']
         }),
        ],
  server: {
    host: '0.0.0.0',
    port: 3002,
    strictPort: true,
  }
});

Seems like building a legacy bundle for documentation would be a desirable thing, so that the broadest possible clients can read them?

[khalwat]

Should be solved by: https://github.com/vitejs/vite/pull/4122

ref: https://github.com/vitejs/vite/issues/3636

[khalwat]

This is unfortunately not fully resolved by the above as I thought it might be.

Doing a build of the docs with the Legacy plugin included now results in:

⠴ building client + server bundles...[vite:dynamic-import-polyfill] Vite's dynamic import polyfill is enabled but was never imported. This should only happen when using custom non-html rollup inputs. Make sure to add `import "vite/dynamic-import-polyfill"` as the first statement in your custom entry.
✖ building client + server bundles...
build error:
 Error: Vite's dynamic import polyfill is enabled but was never imported. This should only happen when using custom non-html rollup inputs. Make sure to add `import "vite/dynamic-import-polyfill"` as the first statement in your custom entry.
    at Object.renderDynamicImport (/app/node_modules/vite/dist/node/chunks/dep-11db14da.js:29320:23)
    at PluginDriver.runHookSync (/app/node_modules/rollup/dist/shared/rollup.js:20178:25)
    at PluginDriver.hookFirstSync (/app/node_modules/rollup/dist/shared/rollup.js:20060:33)
    at ImportExpression.getDynamicImportMechanismAndHelper (/app/node_modules/rollup/dist/shared/rollup.js:8115:40)
    at ImportExpression.setExternalResolution (/app/node_modules/rollup/dist/shared/rollup.js:8103:55)
    at Chunk.prepareDynamicImportsAndImportMetas (/app/node_modules/rollup/dist/shared/rollup.js:12878:34)
    at Chunk.preRender (/app/node_modules/rollup/dist/shared/rollup.js:12323:14)
    at Bundle.prerenderChunks (/app/node_modules/rollup/dist/shared/rollup.js:13644:19)
    at Bundle.generate (/app/node_modules/rollup/dist/shared/rollup.js:13509:18)
    at async handleGenerateWrite (/app/node_modules/rollup/dist/shared/rollup.js:20969:23) {
  code: 'PLUGIN_ERROR',
  plugin: 'vite:dynamic-import-polyfill',
  hook: 'renderDynamicImport'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ docs:build: `npm run docs:fix && npm run docs:lint && vitepress build docs`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ docs:build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-07-15T03_36_42_350Z-debug.log

[Topthinking]

When will it be settled

[brc-dd]

If anyone is trying to fix this, here is the cause: https://github.com/vuejs/vitepress/blob/baf8083e668ce50a9d26d9398609e196237ebc95/src/node/build/bundle.ts. Currently we assume build output to be of type RollupOutput always, but in case we add legacy plugin, the output is of type RollupOutput[].

[Topthinking]

If anyone is trying to fix this, here is the cause: https://github.com/vuejs/vitepress/blob/baf8083e668ce50a9d26d9398609e196237ebc95/src/node/build/bundle.ts. Currently we assume build output to be of type RollupOutput always, but in case we add legacy plugin, the output is of type RollupOutput[].

Can I add a judgment on arrays RollupOutput[].

[brc-dd]

If anyone is trying to fix this, here is the cause: https://github.com/vuejs/vitepress/blob/baf8083e668ce50a9d26d9398609e196237ebc95/src/node/build/bundle.ts. Currently we assume build output to be of type RollupOutput always, but in case we add legacy plugin, the output is of type RollupOutput[].

Okay so this is a bit more complex than that. Even if we handle that multiple targets (array thing), we still would need a lot of refactoring. There are a bunch of places where we are manually emitting assets having exports, and script tags with type module. These all won't work in older browsers. It would be a bit hard to do that. In the meantime you can use build.target + polyfill.io to slightly improve coverage.