vuejs production cdn is not working https://unpkg.com/vue@3/dist/vue.global.prod.js

Question

I am using vuejs as cdn in my web projects ( client side rendering ) my html page:

<!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>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body id="app">
    <h1>Test vue</h1>
    {{title}}
    <script src="./app.js"></script>
</body>
</html>

my app.js

const app = Vue.createApp({
  data(){
    return{
        title:"mashoun"
    }
  }
});

app.mount('#app');

the error

vue.global.prod.js:1 Uncaught SyntaxError: 63
    at Vi (vue.global.prod.js:1:78062)
    at nu (vue.global.prod.js:1:119221)
    at Array.cu (vue.global.prod.js:1:119590)
    at zc (vue.global.prod.js:1:96277)
    at vue.global.prod.js:1:96681
    at zc (vue.global.prod.js:1:96691)
    at Wc (vue.global.prod.js:1:95664)
    at ja (vue.global.prod.js:1:117574)
    at vue.global.prod.js:1:122203
    at fu (vue.global.prod.js:1:122347)

yesterday every thing was good but now all my clients project are down and returning the same error please help me ( paid ) mashoun.me@gmail.com

yesterday every thing was good but now all my clients project are down and returning the same error

score 0 · Answer 1 · answered May 11 '23 at 18:12

Besides the risk associated with the use of unpkg.com (it's unreliable and not production ready), the problem is that broad version range is used, and Vue 3.3 resulted in a breaking change. It can be narrowed to minor version that's known to be compatible:

<script src="https://unpkg.com/vue@3.2/dist/vue.global.prod.js"></script>

Error stack can be debugged to template compiler, the use of <script> inside DOM template causes this, the application relied on undocumented behaviour that script elements are just ignored, which is evidently not the case for Vue 3.3.

Either application root should be separated from the script:

<body>
  <div id="app">
    <h1>Test vue</h1>
    {{title}}
  <div>
  <script src="./app.js"></script>
</body>

Or <script> needs to be moved to document head, and the execution needs to be postponed until the document is ready.

vuejs production cdn is not working https://unpkg.com/vue@3/dist/vue.global.prod.js

1 Answers1