Recently, I've encountered a perplexing error message that has me scratching my head. The error message reads as follows:
ReferenceError: Cannot access uninitialized variable.const app = createApp(App):
// main.js
import {createApp} from 'vue';
import App from 'components/App.vue';
// ...
const app = createApp(App);
// App.vue
<template>
<template v-if="!started">
<Start @started="start" />
</template>
<template v-else-if="!loaded">
<Loading @loaded="loaded = true" />
</template>
<template v-else>
<Tip />
<Cutscene v-if="state.phase == 'INTRO'" />
<Interstitial v-if="state.phase == 'INTERSTITIAL'" />
<Planning v-if="state.phase == 'PLANNING'" />
<Stream v-else-if="state.phase == 'EVENTS'" />
<Report v-else-if="state.phase == 'REPORT'" />
<End :lose="true" v-else-if="state.phase == 'GAMEOVER'" />
<End :lose="false" v-else-if="state.phase == 'GAMEWIN'" />
</template>
</template>
<script>
import debug from '/src/debug';
import state from '/src/state';
import Tip from './tip/Tip.vue';
import Start from './Start.vue';
import Loading from './Loading.vue';
import End from './phases/End.vue';
import Cutscene from './phases/Cutscene.vue';
import Interstitial from './phases/Interstitial.vue';
import Report from './phases/Report.vue';
import Stream from './phases/events/Events.vue';
import Planning from './phases/planning/Planning.vue';
import AudioManager from '/src/audio/manager';
// Hacky
window.audioManager = new AudioManager();
if (!state.sound) {
window.audioManager.muted = true;
}
export default {
data() {
return {
state,
started: false,
loaded: false,
};
},
methods: {
start() {
this.started = true;
}
},
components: {
Tip,
Start,
Report,
Stream,
Planning,
End,
Loading,
Cutscene,
Interstitial,
},
}
</script>
After thorough analysis, it appears that all variables are indeed properly initialized. Interestingly, this error seems to exclusively manifest on Safari (both mobile and desktop). At this point, I'm uncertain if this issue is Vue-related or stems from another source. My Vue version is 3.1.4.