plugin-legacy SystemJS https://git.io/JvFET#8 #4212
Description
Describe the bug
Hi
Im trying to compile app for old browsers (there are some certain versions which I need to support, for eg Chrome 53)
And I got following error in Chrome 53
polyfills-legacy.c6e6dd68.js:1 Uncaught (in promise) Error: assets/index-legacy.d57e0ebc.js, https://xplay.itkey.ru/apps/webOS-2382248b-cc19-41dd-8be6-22ad394c2d63/v3/v3.0.1_ES2009_d21abd0d-b8ba-4ed9-89f1-bf72330fa53e/ (SystemJS https://git.io/JvFET#8)
at Error (native)
at https://xplay.itkey.ru/apps/webOS-2382248b-cc19-41dd-8be6-22ad394c2d63/v3/v…0d-b8ba-4ed9-89f1-bf72330fa53e/assets/polyfills-legacy.c6e6dd68.js:1:33070
at f.O.resolve (https://xplay.itkey.ru/apps/webOS-2382248b-cc19-41dd-8be6-22ad394c2d63/v3/v…0d-b8ba-4ed9-89f1-bf72330fa53e/assets/polyfills-legacy.c6e6dd68.js:1:33099)
at https://xplay.itkey.ru/apps/webOS-2382248b-cc19-41dd-8be6-22ad394c2d63/v3/v…0d-b8ba-4ed9-89f1-bf72330fa53e/assets/polyfills-legacy.c6e6dd68.js:1:30148
The same code does work well in Chrome 91
Reproduction
package.json
{
"name": "App",
"version": "1.0.1",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"@lostinbrittany/qr-esm": "^1.2.0",
"axios": "^0.21.1",
"hls.js": "^1.0.7",
"lodash-es": "^4.17.21",
"mitt": "^2.1.0",
"moment": "^2.29.1",
"moment-duration-format": "^2.3.2",
"roboto-fontface": "^0.10.0",
"vue": "^3.1.2",
"vue-i18n": "^9.1.6",
"vue-router": "^4.0.10",
"vuetify": "^3.0.0-alpha.7",
"vuex": "^4.0.2"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7",
"@babel/runtime": "^7.14.6",
"@vitejs/plugin-legacy": "^1.4.3",
"@vitejs/plugin-vue": "^1.2.4",
"@vue/compiler-sfc": "^3.1.2",
"core-js": "^3.15.2",
"es6-module-loader": "^0.17.11",
"traceur": "^0.0.111",
"vite": "^2.4.1",
"vite-plugin-compression": "^0.3.0"
}
}
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
base: '',
plugins: [vue(),legacy({ targets: ['Chrome >= 53'], polyfills:['es.promise.finally','es/map','es/set'], modernPolyfills:['es.promise.finally'] })],
build: {
outDir: 'output/',
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow">
<meta name="format-detection" content="telephone=no">
<title>App</title>
<style type="text/css">
*:focus{outline: 0}
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body, .v-application { height: 100%; width: 100%; margin: 0; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% }
body::-webkit-scrollbar, .v-application::-webkit-scrollbar { display: none; }
html, body, .v-application { -ms-overflow-style: none; }
body { background-color: #121212; font-size: 1.8rem; -webkit-user-select: none; -webkit-backface-visibility: hidden; user-select: none }
a { text-decoration:none}
* { color: #ddd }
</style>
<script type="module" src="./sources/index.js"></script>
</head>
<body ondragstart="return false" style="background-color:#121212">
<div id="app" class="v-application"></div>
</body>
</html>
./sources/index.js
import { createApp, nextTick, TransitionGroup } from 'vue'
For testing purpose it contains only one dummy line ... but it does not matter if it full app or not just this line
System Info
System:
OS: Windows 10 10.0.19043
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Memory: 7.99 GB / 15.86 GB
Binaries:
Node: 14.17.3 - C:\Program Files\nodejs\node.EXE
npm: 7.19.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.67)
Internet Explorer: 11.0.19041.1
npmPackages:
@vitejs/plugin-vue: ^1.2.4 => 1.2.4
vite: ^2.4.1 => 2.4.1Used Package Manager
npm
Logs
C:\App>npm run build -- --debug --mode production --config vite.config.js
> [email protected] build
> vite build "--debug" "--mode" "production" "--config" "vite.config.js"
2021-07-11T20:35:02.470Z vite:config bundled config file loaded in 240ms
2021-07-11T20:35:02.489Z vite:config using resolved config: {
base: '',
plugins: [
'alias',
'vite:dynamic-import-polyfill',
'vite:resolve',
'vite:html',
'vite:css',
'vite:esbuild',
'vite:json',
'vite:wasm',
'vite:worker',
'vite:asset',
'vite:vue',
'legacy-config',
'legacy-generate-polyfill-chunk',
'legacy-env',
'vite:define',
'vite:css-post',
'vite:build-html',
'commonjs',
'vite:data-uri',
'rollup-plugin-dynamic-import-variables',
'asset-import-meta-url',
'legacy-post-process',
'vite:import-analysis',
'vite:esbuild-transpile',
'vite:terser',
'vite:reporter'
],
build: {
target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
polyfillDynamicImport: true,
outDir: 'output/',
assetsDir: 'assets',
assetsInlineLimit: 4096,
cssCodeSplit: true,
sourcemap: false,
rollupOptions: { output: [Array] },
commonjsOptions: { include: [Array], extensions: [Array] },
dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
minify: 'terser',
terserOptions: {},
cleanCssOptions: {},
write: true,
emptyOutDir: null,
manifest: false,
lib: false,
ssr: false,
ssrManifest: false,
brotliSize: true,
chunkSizeWarningLimit: 500,
watch: null
},
mode: 'production',
configFile: 'C:/App/vite.config.js',
define: {
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false,
'import.meta.env.LEGACY': '__VITE_IS_LEGACY__'
},
ssr: { external: [ 'vue', '@vue/server-renderer' ] },
configFileDependencies: [ 'vite.config.js' ],
inlineConfig: {
root: undefined,
base: undefined,
mode: 'production',
configFile: 'vite.config.js',
logLevel: undefined,
clearScreen: undefined,
build: {}
},
root: 'C:/App',
resolve: { dedupe: undefined, alias: [ [Object] ] },
publicDir: 'C:\\App\\public',
cacheDir: 'C:\\App\\node_modules\\.vite',
command: 'build',
isProduction: true,
server: { fs: { strict: undefined, allow: [Array] } },
env: { BASE_URL: '', MODE: 'production', DEV: false, PROD: true },
assetsInclude: [Function: assetsInclude],
logger: {
hasWarned: false,
info: [Function: info],
warn: [Function: warn],
warnOnce: [Function: warnOnce],
error: [Function: error],
clearScreen: [Function: clearScreen]
},
createResolver: [Function: createResolver],
optimizeDeps: { esbuildOptions: { keepNames: undefined } }
}
vite v2.4.1 building for production...
transforming...
✓ 3 modules transformed.
rendering chunks...
[@vitejs/plugin-legacy] legacy polyfills: Set(4) {
'core-js/modules/es.promise.finally.js',
'core-js/es/map',
'core-js/es/set',
'core-js/modules/es.promise.js'
}
2021-07-11T20:35:03.340Z vite:config using resolved config: {
root: 'C:/App/node_modules/@vitejs/plugin-legacy',
configFile: undefined,
logLevel: 'error',
plugins: [
'alias',
'vite:dynamic-import-polyfill',
'vite:resolve',
'vite:html',
'vite:css',
'vite:esbuild',
'vite:json',
'vite:wasm',
'vite:worker',
'vite:asset',
'polyfills',
'vite:define',
'vite:css-post',
'vite:build-html',
'commonjs',
'vite:data-uri',
'rollup-plugin-dynamic-import-variables',
'asset-import-meta-url',
'vite:import-analysis',
'vite:esbuild-transpile',
'vite:terser',
'vite:reporter'
],
build: {
target: false,
polyfillDynamicImport: false,
outDir: 'dist',
assetsDir: 'assets',
assetsInlineLimit: 4096,
cssCodeSplit: true,
sourcemap: false,
rollupOptions: { input: [Object], output: [Object] },
commonjsOptions: { include: [Array], extensions: [Array] },
dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
minify: 'terser',
terserOptions: {},
cleanCssOptions: {},
write: false,
emptyOutDir: null,
manifest: false,
lib: false,
ssr: false,
ssrManifest: false,
brotliSize: true,
chunkSizeWarningLimit: 500,
watch: null
},
configFileDependencies: [],
inlineConfig: {
root: 'C:\\App\\node_modules\\@vitejs\\plugin-legacy',
configFile: false,
logLevel: 'error',
plugins: [ [Object] ],
build: {
write: false,
target: false,
minify: 'terser',
assetsDir: 'assets',
rollupOptions: [Object]
}
},
base: '/',
resolve: { dedupe: undefined, alias: [ [Object] ] },
publicDir: 'C:\\App\\node_modules\\@vitejs\\plugin-legacy\\public',
cacheDir: 'C:\\App\\node_modules\\@vitejs\\plugin-legacy\\node_modules\\.vite',
command: 'build',
mode: 'production',
isProduction: true,
server: { fs: { strict: undefined, allow: [Array] } },
env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
assetsInclude: [Function: assetsInclude],
logger: {
hasWarned: false,
info: [Function: info],
warn: [Function: warn],
warnOnce: [Function: warnOnce],
error: [Function: error],
clearScreen: [Function: clearScreen]
},
createResolver: [Function: createResolver],
optimizeDeps: { esbuildOptions: { keepNames: undefined } }
}
output/assets/index-legacy.ec4945a9.js 0.08kb / brotli: 0.07kb
output/assets/polyfills-legacy.c6e6dd68.js 32.65kb / brotli: 11.92kb
[@vitejs/plugin-legacy] modern polyfills: Set(1) { 'core-js/modules/es.promise.finally.js' }
2021-07-11T20:35:06.346Z vite:config using resolved config: {
root: 'C:/App/node_modules/@vitejs/plugin-legacy',
configFile: undefined,
logLevel: 'error',
plugins: [
'alias',
'vite:dynamic-import-polyfill',
'vite:resolve',
'vite:html',
'vite:css',
'vite:esbuild',
'vite:json',
'vite:wasm',
'vite:worker',
'vite:asset',
'polyfills',
'vite:define',
'vite:css-post',
'vite:build-html',
'commonjs',
'vite:data-uri',
'rollup-plugin-dynamic-import-variables',
'asset-import-meta-url',
'vite:import-analysis',
'vite:esbuild-transpile',
'vite:terser',
'vite:reporter'
],
build: {
target: false,
polyfillDynamicImport: false,
outDir: 'dist',
assetsDir: 'assets',
assetsInlineLimit: 4096,
cssCodeSplit: true,
sourcemap: false,
rollupOptions: { input: [Object], output: [Object] },
commonjsOptions: { include: [Array], extensions: [Array] },
dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
minify: 'terser',
terserOptions: {},
cleanCssOptions: {},
write: false,
emptyOutDir: null,
manifest: false,
lib: false,
ssr: false,
ssrManifest: false,
brotliSize: true,
chunkSizeWarningLimit: 500,
watch: null
},
configFileDependencies: [],
inlineConfig: {
root: 'C:\\App\\node_modules\\@vitejs\\plugin-legacy',
configFile: false,
logLevel: 'error',
plugins: [ [Object] ],
build: {
write: false,
target: false,
minify: 'terser',
assetsDir: 'assets',
rollupOptions: [Object]
}
},
base: '/',
resolve: { dedupe: undefined, alias: [ [Object] ] },
publicDir: 'C:\\App\\node_modules\\@vitejs\\plugin-legacy\\public',
cacheDir: 'C:\\App\\node_modules\\@vitejs\\plugin-legacy\\node_modules\\.vite',
command: 'build',
mode: 'production',
isProduction: true,
server: { fs: { strict: undefined, allow: [Array] } },
env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
assetsInclude: [Function: assetsInclude],
logger: {
hasWarned: false,
info: [Function: info],
warn: [Function: warn],
warnOnce: [Function: warnOnce],
error: [Function: error],
clearScreen: [Function: clearScreen]
},
createResolver: [Function: createResolver],
optimizeDeps: { esbuildOptions: { keepNames: undefined } }
}
output/index.html 8.10kb
output/assets/index.82b9fa0f.js 0.61kb / brotli: 0.31kb
output/assets/polyfills-modern.182c9f45.js 15.14kb / brotli: 5.55kbValidations
- 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.