Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
6 tasks done
bublikOff opened this issue Jul 11, 2021 · 5 comments · Fixed by #8387
Closed
6 tasks done

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

bublikOff opened this issue Jul 11, 2021 · 5 comments · Fixed by #8387
Labels
p2-edge-case Bug, but has workaround or limited in scope (priority) plugin: legacy

Comments

@bublikOff
Copy link

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 

> App@1.0.1 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

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

same ploblem,need help

@patak-dev
Copy link
Member

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
Copy link

yuyu775 commented Aug 7, 2021

Same ploblem for chrome 40

@marekchen
Copy link

same problem

@wolyshaw
Copy link

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

@sapphi-red sapphi-red added p2-edge-case Bug, but has workaround or limited in scope (priority) and removed pending triage labels May 29, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Jun 13, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
p2-edge-case Bug, but has workaround or limited in scope (priority) plugin: legacy
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants