[@vitejs/plugin-legacy] Polyfills for Symbol make the app break on old browsers #18959
Comments
|
Investigating this a little, I found that the cause that this happens with Vite and not with Webpack is because __VITE_IS_MODERN__&&(function polyfill() {
const relList = document.createElement("link").relList;
if (relList && relList.supports && relList.supports("modulepreload")) {
return;
}
for (const link of document.querySelectorAll('link[rel="modulepreload"]')) {
processPreload(link);
}
new MutationObserver((mutations) => {
for (const mutation of mutations) {
if (mutation.type !== "childList") {
continue;
}
for (const node of mutation.addedNodes) {
if (node.tagName === "LINK" && node.rel === "modulepreload")
processPreload(node);
}
}
}).observe(document, { childList: true, subtree: true });
function getFetchOpts(link) {
const fetchOpts = {};
if (link.integrity) fetchOpts.integrity = link.integrity;
if (link.referrerPolicy) fetchOpts.referrerPolicy = link.referrerPolicy;
if (link.crossOrigin === "use-credentials")
fetchOpts.credentials = "include";
else if (link.crossOrigin === "anonymous") fetchOpts.credentials = "omit";
else fetchOpts.credentials = "same-origin";
return fetchOpts;
}
function processPreload(link) {
if (link.ep)
return;
link.ep = true;
const fetchOpts = getFetchOpts(link);
fetch(link.href, fetchOpts);
}
}());This code uses In particular, when using The problematic part is that this polyfill creates a new Symbol constructor that returns an object. So when you use A workaround for this is to target a version that has no native support for |
|
Additional info: This doesn't happen with Create React App because it enables "loose" on transforms for define class properties. Because of that "defineProperties" babel helper (which internally uses |
sapphi-red
added
bug: upstream
|
That sounds like a bug in babel. Would you report it to babel? |
|
Hi @sapphi-red, yes I will. |
|
Babel issue created: babel/babel#17030 |
Describe the bug
I'm using
@vitejs/plugin-legacyto target Chrome >= 38, including polyfills so I expect the app work properly in Chrome 38. However, when I run the built app on that browser an error is displayed in the console: "Unhandled promise rejection TypeError: @@toPrimitive must return a primitive value".In my app, I'm using Axios. One of its classes (
AxiosHeaders) defines a[Symbol.iterator]property. So, when Babel transpiles this class, it defines this property callingSymbol.iterator[Symbol.toPrimitive]('string'). This call returns an object, not a primitive value, so the error is thrown.As you can see in the reproduction, it will happen with any class that defines [Symbol.iterator] (and probably any other property identified for well known Symbol ([Symbol.toPrimitive] for example))
This makes Vite unusable to target those browsers. (Chrome 38 is important because it's the version of the engine running under SmartTVs LG with webOS 3.x, see https://webostv.developer.lge.com/develop/specifications/web-api-and-web-engine#web-engine)
The same code, built with Webpack works fine.
This bug was initially reported on #12844 but it didn't provide a reproduction
Reproduction
https://github.com/cdatehortuab/vite-issue-plugin-legacy
Steps to reproduce
npm installnpm run buildnpx vite previewSystem Info
System: OS: macOS 14.7.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 19.49 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node Yarn: 4.5.1 - ~/.nvm/versions/node/v22.11.0/bin/yarn npm: 10.9.2 - ~/.nvm/versions/node/v22.11.0/bin/npm Browsers: Safari: 18.1.1 npmPackages: @vitejs/plugin-legacy: ^6.0.0 => 6.0.0 vite: ^6.0.3 => 6.0.3Used Package Manager
npm
Logs
Click to expand!
Validations
The text was updated successfully, but these errors were encountered: