Subscribe on changes!

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

avatar
mashoun
May 11th 2023

Vue version

3

Link to minimal reproduction

https://github.com/mashoun/vuejserror.git

Steps to reproduce

go to index.html then open with live server, the error is consoled :

vue.global.prod.js:1 Uncaught SyntaxError: 63 (at vue.global.prod.js:1:78062) 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)

What is expected?

if this simple vue app is not working then i am sure the error is from the vue cdn , also i tried to use the dev version as cdn it is also not working properly

HTML FILE : 

<!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>

app.js FILE

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

app.mount('#app');

TEH 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

What is actually happening?

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

System Info

No response

Any additional comments?

No response

avatar
sqal
May 11th 2023

This appears to be caused by mounting the app on the <body> tag instead of the "root" element. I don't know why, but it can be easily solved:

-<body id="app">
-    <h1>Test vue</h1>
-    {{title}}
+<body>
+    <div id="app">
+        <h1>Test vue</h1>
+        {{title}}
+    </div>

     <script src="./app.js"></script>
 </body>
avatar
sqal
May 11th 2023

Just wanted to add that when using dev build there's appropriate warning in the console

 [Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.
5  |  </div>
6  |  
7  |      <script src="./app.js"></script>
   |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
  at <App>

however, vue@3.2.47 did not throw an error in the production build, while 3.3 does and it breaks previously working app. I'm not sure if this is intentional in 3.3 or a regression. Someone needs to take a look at it.

avatar
mashoun
May 11th 2023

I am very surprised that it actually worked !!

I have been adding the id=app to the body for the past 3 years and it was working very good.

Is there any negative effects if i used https://unpkg.com/vue@3/dist/vue.global.js instead of the .prod version ?

Thank you so much it was very useful

avatar
nickcartery
May 15th 2023

Hi @yyx990803 , I see that you've ignored the through exception issue, but you still remove DOM actually. Could you please not remove DOM in production mode?

https://github.com/vuejs/core/commit/c454b9d7f431d57abedb7184d1e4059914c4463f

image

Do not have any error, but VueApp is still crashed actually :(

GitHub Track