[Vuejs]-Error saying variable is not defined when it is clearly defined

by

0👍

I’ve found the source of my issue and I think it’s not really an issue since I believe it’s the intended behavior.

This behavior was caused by a babel plugin (babel-plugin-import).

All I had to do to solve my problem was to import Element+ components instead of ElementPlus itself.

Fixed main.ts

import { createApp } from 'vue'
import { History, IHistory } from '@/modules/history/History'
import App from './App.vue'
import { ElRow, ElCol } from 'element-plus'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $hist: IHistory;
  }
}

const app = createApp(App)
app.use(ElRow)
   .use(ElCol)

app.config.globalProperties.$ELEMENT = { size: 'small' }
app.config.globalProperties.$hist = History.instance()
app.mount('#app')

Babel configuration (babel.config.js)

module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
      },
   ],
  ],
};

Leave a comment