Vue 3 error: "Uncaught DOMException: String contains an invalid character"
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.
Comments
Post a Comment