polyfills-legacy.js throw error: Cannot assign to read only property 'prototype' of function

[daoerche]

Describe the bug

When I use the @vitejs/plugin-legacy plugin to generate polyfills-legacy.js, it throws an error in QQ browser version 9.7:

And this error will cause the later injected Systemjs not to be initialized and executed, resulting in the System object not being found and the page js unable to load and run.

The reason for this is because polyfills-legacy.js tries to assign undefined to Array.prototype[Symbol.iterator].prototype, but in QQ browser version 9.7, this value is not writable, and the generation of polyfills-legacy chunk It is built by vite using es build, which makes the chunk enter strict mode by default, resulting in an error.

This issue should cause errors in all browsers with this feature. Although currently I only encountered it in the 9.7 version of the QQ browser.
At present, I solved it by adding a polyfillUseStrict parameter to the local plugin-legacy plugin through patch-package to control the polyfill chunk not to use strict mode.
I don't know if there are other better solutions or if I am using it wrong.

Reproduction

https://github.com/daoerche/polyfills-legacy-error-demo

System Info

System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.58 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Firefox: 98.0.1
    Safari: 14.1.1
  npmPackages:
    @vitejs/plugin-legacy: ^1.8.2 => 1.8.2 
    vite: ^2.9.5 => 2.9.5

Used Package Manager

npm

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

[github-actions]

Hello @daoerche. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[sapphi-red]

core-js does not state that it only works with sloppy mode (non-strict mode).
Maybe similar to this one? zloirock/core-js#844 (comment)

[daoerche]

It doesn't look the same~
I found the source code of the error is located in the core-js/internals/make-built-in.js file：

I don't know who to ask to solve this problem~ Sorry to bother you~ Thanks♪(･ω･)ﾉ

[sapphi-red]

There's nothing I can do without a reproduction.

[daoerche]

There's nothing I can do without a reproduction.

Thank you very much if you would like to help me~
I created a reproduction here.
https://github.com/daoerche/polyfills-legacy-error-demo

It requires you to try it out on a Windows computer, then follow these steps:

1. Install QQ browser: /QQ-Browser/QQBrowser_Setup_9.7.exe
2. cd /polyfills-legacy-error-demo
3. npm i
4. npx vite build
5. npx http-server ./dist
6. Open QQ browser and visit it

The QQ browser version 9.7 installation package has been out of print on the market, which is passed down from generation to generation within our company.
The reason why it is needed is because for historical reasons our company's client software has that version of webview embedded. We are currently planning to upgrade and replace it, but in the short term we still need it~

[sapphi-red]

I was able to reproduce it and found a interesting debug log.

[@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'
}

It seems vite is injecting the same polyfill two times.

[sapphi-red]

It seems it is not affecting this.

[daoerche]

I don't get it! But it's okay so far, I haven't found any problems using the above fix method, thanks again~

[sapphi-red]

It was reproducible without Vite. So it is a core-js's bug.
https://gist.github.com/sapphi-red/c1c02a1df86fbd0df9526f2d0f5e6e6a
Please report this to core-js.

[daoerche]

ok~

[daoerche]

core-js Added a workaround in 3.22.7.
Thanks~