build --watch does not output html or css when @vitejs/plugin-legacy is used

[EricDunaway]

Describe the bug

Vite does not output html or css when the @vitejs/plugin-legacy plugin is used

Possibly related to #3279 but that issue was closed

Reproduction

https://stackblitz.com/edit/vite-c4bxea?devtoolsheight=33

Reproducible by running vite build --watch

System Info

❯ npx envinfo --system --npmPackages '{vite,@vitejs/*}' --binaries --browsers
success Install finished in 1.067s


  System:
    OS: Linux undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: Unknown - /bin/jsh
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  npmPackages:
    @vitejs/plugin-legacy: ^1.6.4 => 1.6.4 
    vite: ^2.6.0 => 2.7.2

Used Package Manager

npm

Logs

❯ vite build --watch --debug
  vite:config bundled config file loaded in 561.00ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-script-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:legacy-config',
  vite:config     'vite:legacy-generate-polyfill-chunk',
  vite:config     'vite:legacy-env',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:legacy-post-process',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: '/home/projects/vite-c4bxea/dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: 'chrome61',
  vite:config     sourcemap: true,
  vite:config     rollupOptions: { input: '/home/projects/vite-c4bxea/index.html', output: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: true,
  vite:config     brotliSize: true,
  vite:config     w: true,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   define: { 'import.meta.env.LEGACY': '__VITE_IS_LEGACY__' },
  vite:config   configFile: '/home/projects/vite-c4bxea/vite.config.js',
  vite:config   configFileDependencies: [ 'vite.config.js' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: { watch: true, w: true }
  vite:config   },
  vite:config   root: '/home/projects/vite-c4bxea',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   publicDir: '/home/projects/vite-c4bxea/public',
  vite:config   cacheDir: '/home/projects/vite-c4bxea/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   server: { fs: { strict: true, allow: [Array], deny: [Array] } },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) { set: [Function (anonymous)] },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: {
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   }
  vite:config } +8ms
vite v2.7.2 building for production...

watching for file changes...

build started...
✓ 4 modules transformed.
rendering chunks (1)...[@vitejs/plugin-legacy] legacy polyfills: Set(5) {
  'core-js/modules/es.promise',
  'core-js/modules/es.array.iterator',
  'core-js/modules/es.array.iterator.js',
  'core-js/modules/web.dom-collections.iterator.js',
  'core-js/modules/es.promise.js'
}
  vite:config using resolved config: {
  vite:config   root: '/home/projects/vite-c4bxea/node_modules/@vitejs/plugin-legacy',
  vite:config   configFile: undefined,
  vite:config   logLevel: 'error',
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-script-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:legacy-polyfills',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   build: {
  vite:config     target: false,
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: '/home/projects/vite-c4bxea/node_modules/@vitejs/plugin-legacy/dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: false,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { input: [Object], output: [Object] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     write: false,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   configFileDependencies: [],
  vite:config   inlineConfig: {
  vite:config     root: '/home/projects/vite-c4bxea/node_modules/@vitejs/plugin-legacy',
  vite:config     configFile: false,
  vite:config     logLevel: 'error',
  vite:config     plugins: [ [Object] ],
  vite:config     build: {
  vite:config       write: false,
  vite:config       target: false,
  vite:config       minify: 'terser',
  vite:config       assetsDir: 'assets',
  vite:config       rollupOptions: [Object]
  vite:config     }
  vite:config   },
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   publicDir: '/home/projects/vite-c4bxea/node_modules/@vitejs/plugin-legacy/public',
  vite:config   cacheDir: '/home/projects/vite-c4bxea/node_modules/@vitejs/plugin-legacy/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   server: { fs: { strict: true, allow: [Array], deny: [Array] } },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) { set: [Function (anonymous)] },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: {
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   }
  vite:config } +2s
rendering chunks (2)...[vite:build-html] No corresponding legacy polyfill chunk found for /home/projects/vite-c4bxea/index.html
dist/assets/index-legacy.5c4c0183.js       0.49 KiB / gzip: 0.36 KiB
dist/assets/index-legacy.5c4c0183.js.map   0.37 KiB
dist/assets/polyfills-legacy.ff863e63.js   30.00 KiB / gzip: 12.50 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.

[GreedyWhale]

I had the same problem

[morelearn1990]

I had the same problem.

but I have a mistake here：

[vite:build-html] No corresponding legacy polyfill chunk found for /home/projects/vitejs-vite-4znqdj/index.html

Reproduction：

https://stackblitz.com/edit/vitejs-vite-4znqdj?file=vite.config.ts&terminal=build-w

[morelearn1990]

I printed some logs that showed that some hook functions were executed in the wrong order when using watch。

plugin vite:legacy-post-process hook transformIndexHtml execution time has been advanced.

How should i resolve this?

Reproduction：

https://stackblitz.com/edit/vitejs-vite-4znqdj?file=vite.config.ts&terminal=build-w

[Elemy]

I had the same problem.

I have a mistake here：
[vite:build-html] No corresponding legacy polyfill chunk found for /home/projects/github-kyokdx-u2bdcf/app2/index.html

my project use @originjs/vite-plugin-federation and @vitejs/plugin-legacy both. Remove @originjs/vite-plugin-federation，the mistake will gone.

I try to changed the filename in the federation configuration to "remoteEntry-legacy.js"，the mistake also will gone，but I not sure @vitejs/plugin-legacy work successfull.

Reproduction：
https://stackblitz.com/edit/github-kyokdx-u2bdcf?file=readme.md,app2%2Fvite.config.js,package.json

cd app2
yarn build

[VaJoy]

I had the same problem.

I have a mistake here： [vite:build-html] No corresponding legacy polyfill chunk found for /home/projects/github-kyokdx-u2bdcf/app2/index.html

my project use @originjs/vite-plugin-federation and @vitejs/plugin-legacy both. Remove @originjs/vite-plugin-federation，the mistake will gone.

I try to changed the filename in the federation configuration to "remoteEntry-legacy.js"，the mistake also will gone，but I not sure @vitejs/plugin-legacy work successfull.

Reproduction： https://stackblitz.com/edit/github-kyokdx-u2bdcf?file=readme.md,app2%2Fvite.config.js,package.json

cd app2
yarn build

I've got the same issue.

[Deuscx]

same issue. any update?

[ruixiaozi]

同样的问题，何时更新啊

[ruixiaozi]

仅在-w参数时出现

[JuniorTour]

Same error, when combine createHtmlPlugin and @vitejs/plugin-legacy, vite will throw Error: [vite:build-html] No corresponding legacy entry chunk found for /.../index.html

  plugins: [
    createHtmlPlugin({
      inject: {
        data: {
          injectScript: `<script src="/public/co-channel.js"></script>`,
        },
      },
    }),
    legacy({
      targets: {
        ie: '11',
      },
    }),
]

[tonylua]

+1 同样是 federation，就算改成 -legacy， remoteEntry 也不会被编译

[nicky132]

same problem when i use" lerna run build --scope=main --stream --parallel -- --watch "to watch "vite build --mode production", how can i solve this

[JortdeBokx]

any updates?

[Miofly]

how to resolve problem

[chenhw]

any updates?

[BrahimOubbad]

Is there any way for fix this issue

[curlykay]

It's amazing that this issue came up in 2021! No solution or instructions so far? I'm experiencing the same problem.