plugin-legacy for IE11 dosen't work

[Darcrandex]

Describe the bug

Hello, I need some help, please. Just read the steps, ↓

you can glone this repository for more detail vite-for-ie11

1. create a project with vanilla

yarn create vite vite-for-ie11 --template vanilla

2. install plugin @vitejs/plugin-legacy

yarn add @vitejs/plugin-legacy -D

3. create config file and set configs

I just follow the tutorial

touch vite.config.js

// vite.config.js

import legacy from "@vitejs/plugin-legacy";

export default {
  plugins: [
    legacy({
      // for ie11
      targets: ["ie >= 11"],
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
    }),
  ],
};

4. add the test code

const apis = ["Proxy", "Reflect", "Promise", "Set", "Map"];

document.querySelector("#app").innerHTML = `
  <h1>Hello Vite!</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>

  <ol>${apis
    .map((v) => `<li>${v}: ${Boolean(window[v]) ? "yes" : "no"}</li>`)
    .join("")}</ol>
`;

Then I run yarn serve, I got a error msg:

Unhandled promise rejection TypeError: Target is not iterable

Reproduction

https://github.com/Darcrandex/vite-for-ie11.git

System Info

System:
    OS: Windows 10 10.0.18362
    CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
    Memory: 7.27 GB / 15.46 GB
  Binaries:
    Node: 14.16.1 - D:\nodejs\node.EXE
    Yarn: 1.22.10 - D:\nodejs\yarn.CMD
    npm: 6.14.12 - D:\nodejs\npm.CMD
  Browsers:
    Chrome: 90.0.4430.212
    Edge: Spartan (44.18362.449.0)
    Internet Explorer: 11.0.18362.1
  npmPackages:
    vite: ^2.4.4 => 2.4.4

Used Package Manager

yarn

Logs

No response

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.

[patak-dev]

@nulladdict @AlexandreBonaventure maybe you could help to triage this one if you have some time.

[AlexandreBonaventure]

After taking a quick look, it seems something is requiring the es.array.iterator polyfill. Probably usage of Promise.all somewhere... (see babel/babel#9872 (comment))
Maybe this is SystemJS which requires the Promise polyfill: https://github.com/systemjs/systemjs#ie11-support

Anyways, you can workaround your issue by adding the polyfill manually like that:

import legacy from "@vitejs/plugin-legacy";

export default {
  plugins: [
    legacy({
      // for ie11
      targets: ["ie >= 11"],
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
      polyfills: ["es.array.iterator"],
    }),
  ],
};

@patak-js we should consider adding some default polyfills like this one 🔼

[Darcrandex]

After taking a quick look, it seems something is requiring the es.array.iterator polyfill. Probably usage of Promise.all somewhere... (see babel/babel#9872 (comment))
Maybe this is SystemJS which requires the Promise polyfill: https://github.com/systemjs/systemjs#ie11-support

Anyways, you can workaround your issue by adding the polyfill manually like that:

import legacy from "@vitejs/plugin-legacy";

export default {
  plugins: [
    legacy({
      // for ie11
      targets: ["ie >= 11"],
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
      polyfills: ["es.array.iterator"],
    }),
  ],
};

@patak-js we should consider adding some default polyfills like this one 🔼

Thanks.

[patak-dev]

Thanks @AlexandreBonaventure! So, is it ok to say that this is an upstream bug in Babel then?

[AlexandreBonaventure]

@patak-js well actually this is not really an upstream bug because:

1. SystemJS relies on Promise.all which requires not only a es.promise polyfill but also the es.array.iterator polyfill
   see https://github.com/systemjs/systemjs/blob/75853dddde25b13244059babc2657a60196c1b13/src/system-core.js#L143

2. babel-preset-env has no way to know what SystemJS requires in terms of polyfill.
   This documentation https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import#working-with-webpack-and-babelpreset-env (this is about webpack internal but this fundamentally the same issue)

So I think we should add es.promise + es6.array.iterator at all time in the legacy plugin because systemJS needs it to operate correctly.
It is cleary stated here: https://github.com/systemjs/systemjs#ie11-support

[github-actions]

Hello @Darcrandex. We like your proposal/feedback and would appreciate a contribution via a Pull Request by you or another community member. We thank you in advance for your contribution and are looking forward to reviewing it!

[AlexandreBonaventure]

PR here: #4440

[SilentFlute]

@AlexandreBonaventure excuse me, i use vite to development a library without any framework, in my code, i use many es6+ syntax, such as const and arrow function, maybe async/await as well, the project does not fished yet, but i should concerned about the legacy browsers support at the beginning, therefore i used @vitejs/plugin-legacy, and i set vite.config.js as u mentioned before:

import { resolve } from 'path';
import { defineConfig } from 'vite';
import legacy from "@vitejs/plugin-legacy";

export default defineConfig({
  plugins: [
    legacy({
      // for ie11
      targets: ["ie >= 11"],
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
      polyfills: ["es.array.iterator"],
    })
  ],
  resolve: {
    alias: {
      'Src': resolve(__dirname, './src')
    }
  },
  server: {
    fs: {
      allow: ['./src']
    }
  },
  build: {
    lib: {
      entry: resolve(__dirname, 'src/main.ts'),
      name: 'mainsite-bury-point',
      formats: ['umd'],
      fileName: (format) => `mbp.${format}.js`
    }
  }
});

but when i build my project, i got a error:

error during build:
Error: @vitejs/plugin-legacy does not support library mode.

i guess maybe babel will be better?
this is my first time use vite and rollup as well, i wish u can give me some advice to figure this out, thx

[SilentFlute]

btw, i tried this as well:

import { resolve } from 'path';
import { defineConfig } from 'vite';
import babel from '@rollup/plugin-babel';

export default defineConfig({
  resolve: {
    alias: {
      'Src': resolve(__dirname, './src')
    }
  },
  server: {
    fs: {
      allow: ['./src']
    }
  },
  build: {
    lib: {
      entry: resolve(__dirname, 'src/main.ts'),
      name: 'mainsite-bury-point',
      formats: ['umd'],
      fileName: (format) => `mbp.${format}.js`
    }
  },
  rollupInputOptions: {
    plugins: [
      babel({
        presets: [[
          "@babel/preset-env",
          {
            "corejs": 2,
            "useBuiltIns": "usage",
            "targets": {
              "ie": "11"
            }
          }
        ]]
      })
    ]
  }
});

but i still found the const in the dist, so it means the compile failed?