FranckFreiburger / vue3-sfc-loader

Single File Component loader for Vue2 and Vue3. Load .vue files directly from your HTML. No node.js environment, no build step.
MIT License
1.03k stars 116 forks source link

Broken behaviour in Chrome 75 #94

Closed Sikarii closed 2 years ago

Sikarii commented 2 years ago

When using sfc-loader 0.8.0 and onwards, Chrome 75 fails with the following error: Uncaught SyntaxError: Unexpected token ? on line 82 in vue3-sfc-loader.js (minified).

The line is: https://github.com/FranckFreiburger/vue3-sfc-loader/blob/v0.8.4/src/index.ts#L103 Simply swapping the operator from ?? to || makes it work again.

To Reproduce

  1. Run the minimal reproduction below on Chrome 75 (or any other browser without support for the nullish coalescing operator)
  2. Observe the execution stopping when it encounters ?? in line 82 from the minified script.

Expected behavior No nullish coalescing operators would be in the minified script, thus making browsers load it with no problem.

Versions

Additional context

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3 SFC Loader Chrome 75 Breakage Repro</title>
  </head>

  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/vue@3.1.4"></script>
    <script src="https://unpkg.com/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.js"></script>
    <script>
      const options = {
        moduleCache: {
          vue: window["Vue"],
        },
      };

      const app = Vue.createApp({
        components: {
          hello: {
            template: "Hello world",
          },
        },

        template: `<hello></hello>`,
      });

      app.mount("#app");
    </script>
  </body>
</html>
FranckFreiburger commented 2 years ago

default browsersList query for vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.js is :

1%, last 2 versions, Firefox ESR, not dead, ie 11 and supports proxy

npx browserslist "> 1%, last 2 versions, Firefox ESR, not dead, ie 11 and supports proxy" returns :

and_chr 91
and_ff 89
and_qq 10.4
and_uc 12.12
android 91
chrome 91
chrome 90
edge 91
edge 90
firefox 89
firefox 88
firefox 78
ios_saf 14.5-14.7
ios_saf 14.0-14.4
kaios 2.5
op_mob 62
opera 77
opera 76
safari 14.1
safari 14
samsung 14.0
samsung 13.0

that excludes Chrome 75

You can try to build your own version of vue3-sfc-loader with the browsers you need to support. (see https://github.com/FranckFreiburger/vue3-sfc-loader#build-your-own-version)

FranckFreiburger commented 2 years ago

new FAQ entry : https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/docs/faq.md#vue3-sfc-loader-fails-to-load-with-uncaught-syntaxerror-unexpected-token--

Sikarii commented 2 years ago

Oh I see, so 0.7.3 working on Chrome 75 was just blind luck! Thank you, I'll look into building my own version.