I recently created a website using vite and vue.js. Initially, everything worked perfectly when I ran npm run dev. However, after building the app with npm run build, it stopped functioning properly. A blank page appeared with an error message stating "cannot read property of undefined (reading isDark)". See the error message here.
Here is the relevant snippet from my app.vue code. The 'isDark' property is only used in this component:
<script setup>
// This starter template is based on Vue 3 <script setup> SFCs
// For more information, visit https://vuejs.org/api/sfc-script-setup.html#script-setup
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
</script>
<template>
<div :class="'portfolio ' + (this.isDark ? 'dark' : '')">
<Header
@toggleDarkMode="() => toggleDarkMode()"
:dark="this ? this.isDark : false"
/>
<div
class="
content
transition-colors
duration-300
ease-linear
text-black
dark:text-white
bg-gray-300
dark:bg-gray-800
pt-16
"
>
<router-view />
</div>
<Footer />
</div>
</template>
<script>
export default {
name: "App",
emits: ["toggleDarkMode"],
beforeCreate() {
console.log(this.isDark);
console.log(this.isDark != null);
this.isDark = localStorage.getItem("darkMode") == "true";
console.log(this.isDark);
},
created() {
this.isDark = localStorage.getItem("darkMode") == "true";
},
methods: {
toggleDarkMode() {
if (this === undefinded) return;
this.isDark = !this.isDark;
localStorage.setItem("darkMode", this.isDark);
},
},
data() {
return {
isDark: true,
};
},
components: [Header],
};
</script>
<style scoped>
</style>