plugin-legacy SystemJS https://git.io/JvFET#8 #4212

bublikOff · 2021-07-11T20:38:14Z

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

Used 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.55kb

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 text was updated successfully, but these errors were encountered:

Eating-Eating · 2021-07-21T09:35:35Z

same ploblem,need help

patak-dev · 2021-08-06T08:11:30Z

Is this still an issue with the latest version of plugin-legacy?

About your reproduction, it helps to provide a link to a Github Repo so others can test your issue more easily.

yuyu775 · 2021-08-07T14:04:14Z

Same ploblem for chrome 40

marekchen · 2021-08-12T11:31:29Z

same problem

wolyshaw · 2021-08-18T06:09:36Z

vite.config.js
base: '' replace with base: './'
This will solve my problem

bublikOff added the pending triage label Jul 11, 2021

bublikOff changed the title ~~SystemJS https://git.io/JvFET#8~~ plugin-legacy SystemJS https://git.io/JvFET#8 Jul 11, 2021

haoqunjiang added the plugin: legacy label Jul 14, 2021

sapphi-red added p2-edge-case Bug, but has workaround or limited in scope (priority) and removed pending triage labels May 29, 2022

sapphi-red mentioned this issue May 29, 2022

fix(plugin-legacy): empty base makes import fail (fixes #4212) #8387

Merged

9 tasks

patak-dev closed this as completed in #8387 May 29, 2022

patak-dev pushed a commit that referenced this issue May 29, 2022

fix(plugin-legacy): empty base makes import fail (fixes #4212) (#8387)

1a16f12

github-actions bot locked and limited conversation to collaborators Jun 13, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

plugin-legacy SystemJS https://git.io/JvFET#8 #4212

plugin-legacy SystemJS https://git.io/JvFET#8 #4212

bublikOff commented Jul 11, 2021

Eating-Eating commented Jul 21, 2021

patak-dev commented Aug 6, 2021

yuyu775 commented Aug 7, 2021

marekchen commented Aug 12, 2021

wolyshaw commented Aug 18, 2021

plugin-legacy SystemJS https://git.io/JvFET#8 #4212

plugin-legacy SystemJS https://git.io/JvFET#8 #4212

Comments

bublikOff commented Jul 11, 2021

Describe the bug

Reproduction

System Info

Used Package Manager

Logs

Validations

Eating-Eating commented Jul 21, 2021

patak-dev commented Aug 6, 2021

yuyu775 commented Aug 7, 2021

marekchen commented Aug 12, 2021

wolyshaw commented Aug 18, 2021