Vue 3 error: "Uncaught DOMException: String contains an invalid character"-CodePudding

I am trying out vue.js on a simple website. It has a single index.html file, and all the JavaScript is contained in a single index.js file.

Here is the website, which is currently unfinished, but shouldn't have anything preventing the JavaScript from working.

<!DOCTYPE html>
<html>
   <head>
      <title>Welcome to getty.nz!</title>
      <link rel="icon" type="image/x-icon" href="favicon">
      <link rel="stylesheet" type="text/css" href="css/style.css" />
      <link rel="stylesheet" href="https://unpkg.com/98.css" />
      <meta charset="utf-8">
      <meta name="author" content="Jamie Getty">
      <meta name="description" content="This is my website.">
   </head>
   <body>
      <script src="https://unpkg.com/vue@3"></script>
      <div id="app" >
         <div >
            <div >Welcome to getty.nz!</div>
            <div >
               <button aria-label="Help" @click="showingNavbar = !showingNavbar"></button>
               <button v-show="showingNavbar" aria-label="Minimize" @click="showingNavbar = false"></button>
               <button v-show="!showingNavbar" aria-label="Maximize" @click="showingNavbar = true"></button>
               <button aria-label="Close" @click="do_error"></button>
            </div>
         </div>
         <div >
            <div >
               <div >
                  <ul v-show="showingNavbar" id="MySidePanel" >
                     <li><h3>Navigation</h3></li>
                     <li>Profile</li>
                     <ul>
                        <li><a @click="showingNavbar = !showingNavbar">About Me</a></li>
                        <li><a @click="showingNavbar = !showingNavbar">Contact Information</a></li>
                     </ul>
                     <li>Other</li>
                     <ul>
                        <li><a @click="showingNavbar = !showingNavbar">Interesting Things</a></li>
                        <li><a @click="showingNavbar = !showingNavbar">RSS Feed</a></li>
                     </ul>
                  </ul>
               </div>
               <div >
                  <component :is="currentContent" ></component>
                  Test
               </div>
            </div>
            <div >
               <p >
               Windows 98 style CSS created by https://jdan.github.io/98.css/
               </p>
            </div>
         </div>
      </div>
      <script src="index.js"></script>
   </body>
</html>

The developer console has the following errors:

You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production. vue@3:10911:23
Uncaught DOMException: String contains an invalid character vue@3:9301
    createElement https://unpkg.com/vue@3:9301
    mountElement https://unpkg.com/vue@3:6615
    processElement https://unpkg.com/vue@3:6604
    patch https://unpkg.com/vue@3:6524
    mountChildren https://unpkg.com/vue@3:6712
    mountElement https://unpkg.com/vue@3:6622
    processElement https://unpkg.com/vue@3:6604
    patch https://unpkg.com/vue@3:6524
    mountChildren https://unpkg.com/vue@3:6712
    mountElement https://unpkg.com/vue@3:6622
    processElement https://unpkg.com/vue@3:6604
    patch https://unpkg.com/vue@3:6524
    mountChildren https://unpkg.com/vue@3:6712
    mountElement https://unpkg.com/vue@3:6622
    processElement https://unpkg.com/vue@3:6604
    patch https://unpkg.com/vue@3:6524
    mountChildren https://unpkg.com/vue@3:6712
    processFragment https://unpkg.com/vue@3:6884
    patch https://unpkg.com/vue@3:6520
    componentUpdateFn https://unpkg.com/vue@3:7064
    run https://unpkg.com/vue@3:613
    update https://unpkg.com/vue@3:7171
    setupRenderEffect https://unpkg.com/vue@3:7185
    mountComponent https://unpkg.com/vue@3:6967
    processComponent https://unpkg.com/vue@3:6925
    patch https://unpkg.com/vue@3:6527
    render https://unpkg.com/vue@3:7685
    mount https://unpkg.com/vue@3:5926
    mount https://unpkg.com/vue@3:10824
    <anonymous> https://getty.nz/index.js:17

Here is the contents of index.js. I based it on the quick-start guide from Vue's website (https://vuejs.org/guide/quick-start.html#without-build-tools).

const { createApp } = Vue

createApp({
   data() {
      return {
         currentContent: "About Me",
         showingNavbar: true
      }
   },
   methods: {
      do_error() {
         music = new Audio('sounds/Windows-98-chord.mp3')
         music.play()
         confirm("What did you expect?")
      }
   }
}).mount('#app')

Line 17 is what the console error points to, which is the .mount statement. I don't know what's wrong with that though.

CodePudding user response：

I believe the problem is the <component>.is bound to currentContent, which is just a string: