I keep encountering an error message stating that my variable is not defined, even though I have clearly defined it just a few lines above where the error occurs.
The reason behind this error is baffling to me, as I cannot identify any potential triggers for it.
Interestingly, this error exclusively manifests itself in the browser, whereas there are no issues reported in the terminal where my application is actively running.
https://i.sstatic.net/rCjO1.png
Snippet from main.ts
import { createApp } from 'vue'
import { History, IHistory } from '@/modules/history/History'
import App from './App.vue'
import ElementPlus from 'element-plus'
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$hist: IHistory;
}
}
const app = createApp(App)
app.use(ElementPlus, { size: 'small' })
app.config.globalProperties.$ELEMENT = { size: 'small' }
app.config.globalProperties.$hist = History.instance()
app.mount('#app')
Exported console logs
log.js?1afd:24 [HMR] Waiting for update signal from WDS...
main.ts?cd49:13 Uncaught ReferenceError: ElementPlus is not defined
at eval (main.ts?cd49:13)
at Module../src/main.ts (app.js:1798)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at Object.1 (app.js:2027)
at __webpack_require__ (app.js:849)
at checkDeferredModules (app.js:46)
at app.js:925
at app.js:928
eval @ main.ts?cd49:13
./src/main.ts @ app.js:1798
__webpack_require__ @ app.js:849
fn @ app.js:151
1 @ app.js:2027
__webpack_require__ @ app.js:849
checkDeferredModules @ app.js:46
(anonymous) @ app.js:925
(anonymous) @ app.js:928