@vitejs/plugin-legacy doesn't work on ie11, the script isn't executed and it isn't transpiled.

[ericmackrodt]

Describe the bug

I am trying to run my application on IE 11, it's using react and typescript, but the transpiled scripts do not work at all.
The index.html page is loaded but it stays blank with and the script doesn't run.

I have setup a vanilla vite app to see if it was my React+Typescript setup and the problem also happens in the vanilla app, which I liked in the repo.

I also put an alert in the js to see if that would fire, but nothing happened, I also have no errors on the console.

The HTML file is loaded though:

The script file seems to have been downloaded even though it wasn't executed.

Also, I'm pretty sure IE11 wouldn't like import './style.css'; or the template string if the script was running.

I used the default vite.config.js from @vitejs/plugin-legacy for this:

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

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

Removing type="module" from the script tag seems to allow the script to run but I don't know if it's a good idea to do that because I'm not too sure if vite needs that for any reason.

Also, as suspected, even though the script runs, I get syntax errors due to the code not being transpiled to js that is compatible with IE 11.

I don't know what to do here, any help is appreciated.

Thanks in advance.

Reproduction

https://github.com/ericmackrodt/vitejs-vite-wgu8t4

System Info

System:
    OS: macOS 11.5.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 629.89 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Chrome Canary: 98.0.4743.0
    Firefox: 96.0.1
    Safari: 14.1.2
  npmPackages:
    @vitejs/plugin-legacy: ^1.6.4 => 1.6.4 
    vite: ^2.7.2 => 2.7.13

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.
• The provided reproduction is a minimal reproducible example of the bug.

[yoyo930021]

Do you use yarn build and using files in the dist folder?
The @vite/plugin-legacy only affects build mode.

[jingshanchen]

Do you use yarn build and using files in the dist folder? The @vite/plugin-legacy only affects build mode.
How to do if we want to debugger some compatible bugs in dev Env?

[yoyo930021]

Do you use yarn build and using files in the dist folder? The @vite/plugin-legacy only affects build mode.
How to do if we want to debugger some compatible bugs in dev Env?

yarn build
yarn preview

[jingshanchen]

so no Hmr mode ?

[yoyo930021]

so no Hmr mode ?

Vite provides fast dev env in the modern browsers, but not in IE11.
The @vite/plugin-legacy provides a prod legacy build for users.

[Dan503]

The @vite/plugin-legacy only affects build mode.

The documentation doesn't make this clear enough.

The very first line of the documentation should say this in bold letters:

@vite/plugin-legacy only affects build mode, not dev mode!