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.

Sign up for GitHub

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

Jump to bottom

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

Closed
mashoun opened this issue May 11, 2023 · 4 comments
Closed

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

mashoun opened this issue May 11, 2023 · 4 comments

Comments

@mashoun
Copy link

mashoun commented May 11, 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
@sqal
Copy link
Contributor

sqal commented May 11, 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>

@sqal
Copy link
Contributor

sqal commented May 11, 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.

@mashoun
Copy link
Author

mashoun commented May 11, 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

@nickcartery
Copy link

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?

c454b9d

image

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

@github-actions github-actions bot locked and limited conversation to collaborators Sep 10, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@sqal @nickcartery @mashoun