Блог

В моем текущем проекте я попытался импортировать и включить vuetify-dialog. Когда я включаю его, мой процесс запуска завершается сбоем. Итак, вот как мой main.js похоже

 // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

import vuetify from './vuetify'
import router from './router/index'

import Default from './layouts/Default.vue'
import NoSidebar from './layouts/NoSidebar.vue'
import VueFilterDateFormat from '@vuejs-community/vue-filter-date-format'
import VuetifyDialog from 'vuetify-dialog'

import 'vuetify-dialog/dist/vuetify-dialog.css'

Vue.use(VuetifyDialog, {
  context: {
    vuetify
  }
})
Vue.use(VueFilterDateFormat)
Vue.component('default-layout', Default)
Vue.component('nosidebar-layout', NoSidebar)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  vuetify,
  router,
  render: h => h(App)
}).$mount('#app')
  

Мой package.json выглядит следующим образом:

   "dependencies": {
    "@mdi/font": "^5.5.55",
    "@vuejs-community/vue-filter-date-format": "^1.6.1",
    "axios": "^0.19.2",
    "deepmerge": "^4.2.2",
    "fibers": "^5.0.0",
    "sass": "^1.26.10",
    "sass-loader": "^9.0.3",
    "vue": "^2.6.11",
    "vue-password-strength-meter": "^1.7.2",
    "vue-router": "^3.0.1",
    "vuetify": "^2.3.9",
    "vuetify-dialog": "^2.0.10",
    "zxcvbn": "^4.4.2"
  },
  

Когда я пытаюсь запустить yarn dev , я получаю эти ошибки:

 
 error  in ./node_modules/vuetify/lib/components/VCalendar/VCalendarDaily.js

Module parse failed: Unexpected token (25:8)
You may need an appropriate loader to handle this file type.
|       return {
|         'v-calendar-daily': true,
|         ...this.themeClasses
|       };
|     }

 @ ./node_modules/vuetify/lib/components/VCalendar/index.js 2:0-46
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./node_modules/vuetify-dialog/dist/vuetify-dialog.esm.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./node_modules/vuetify/lib/mixins/colorable/index.js

Module parse failed: Unexpected token (26:23)
You may need an appropriate loader to handle this file type.
|
|       if (isCssColor(color)) {
|         data.style = { ...data.style,
|           'background-color': `${color}`,
|           'border-color': `${color}`

 @ ./node_modules/vuetify/lib/components/VTabs/VTabsSlider.js 2:0-47
 @ ./node_modules/vuetify/lib/components/VTabs/index.js
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./node_modules/vuetify-dialog/dist/vuetify-dialog.esm.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./node_modules/vuetify/lib/components/VSystemBar/VSystemBar.js

Module parse failed: Unexpected token (26:8)
You may need an appropriate loader to handle this file type.
|         'v-system-bar--fixed': !this.absolute amp;amp; (this.app || this.fixed),
|         'v-system-bar--window': this.window,
|         ...this.themeClasses
|       };
|     },

 @ ./node_modules/vuetify/lib/components/VSystemBar/index.js 1:0-38
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./node_modules/vuetify-dialog/dist/vuetify-dialog.esm.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./node_modules/vuetify/lib/components/VTabs/VTab.js

Module parse failed: Unexpected token (26:8)
You may need an appropriate loader to handle this file type.
|       return {
|         'v-tab': true,
|         ...Routable.options.computed.classes.call(this),
|         'v-tab--disabled': this.disabled,
|         ...this.groupClasses

 @ ./node_modules/vuetify/lib/components/VTabs/index.js 2:0-26
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./node_modules/vuetify-dialog/dist/vuetify-dialog.esm.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
  

Мой терминал hole заполнен им.
Когда я удаляю vuetify-dialog из моего основного файла, все работает.
Что я здесь пропустил?