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

Question

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" class="window">
         <div class="title-bar">
            <div class="title-bar-text">Welcome to getty.nz!</div>
            <div class="title-bar-controls">
               <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 class="window-body">
            <div class="nav-and-body">
               <div class="my-side-panel">
                  <ul v-show="showingNavbar" id="MySidePanel" class="tree-view">
                     <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 class="my-main-content">
                  <component :is="currentContent" class="windowContent"></component>
                  Test
               </div>
            </div>
            <div class="status-bar">
               <p class="status-bar-field">
               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.

tony19 · Accepted Answer · 2022-07-24 20:11:25Z

1

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

                   👇
<component :is="currentContent" class="windowContent"></component>

createApp({
   data() {
      return {  👇
         currentContent: "About Me",
      }
   },
})

<component> is intended for dynamic components, which doesn't apply to strings.

Solution

It looks like you're actually just trying to render the currentContent string in the template. Instead of the <component>, use curly brackets ({{ }}) for string interpolation:

<div class="windowContent">{{ currentContent }}</div>

demo

answered Jul 24, 2022 at 20:11

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Razorfoot Over a year ago

That certainly works. I used components because my aim with this website was to swap out the main content based on what was pressed on the sidebar, but this fix prevents everything breaking until I get my full solution working.

Collectives™ on Stack Overflow

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

1 Answer 1

Solution

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related