Ошибка компонента PrimeVue Toast: не удается разрешить './ToastMessage' в * / toast

Question

В настоящее время я начинаю новый проект с vuejs и хочу использовать primevue для некоторых компонентов. Мои знания VueJS в целом не самые лучшие, потому что я только начинаю с ним работать. У моего приложения есть сборка на основе веб-пакета с настроенным vue-loader, так что именно так устанавливается primevue.

Я пытался использовать компонент Toast-Component, но при импорте Toast из веб-пакета primevue / toastservice выдает две ошибки:

ОШИБКА в./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js&)

Модуль не найден: ошибка: не удается разрешить './ToastMessage' в '* / node_modules / primevue / components / toast'

@./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/toast/Toast.vue? vue & type= script & lang=js &) 11:0-42 86:24-36

@./node_modules/primevue/components/toast/Toast.vue?vue&type=script&lang=js&

@./node_modules/primevue/components/toast/Toast.vue

@./node_modules/primevue/toast.js

@./src/main.js

а также

ОШИБКА в./node_modules/primevue/components/toast/Toast.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components//Toast.vue?vue&type=style&index=0&lang=css&) 97:0

Ошибка синтаксического анализа модуля: неожиданный токен (97:0)

Файл был обработан этими загрузчиками:

*. / node_modules / vue-loader / lib / index.js

Вам может потребоваться дополнительный загрузчик для обработки результата этих загрузчиков.

|

|

->.p-toast {

| положение: фиксированное;

| ширина: 20em;

@./node_modules/primevue/components/toast/Toast.vue?vue&type=style&index=0&lang=css& 1:0-118 1:134-137 1:139-254 1:139-254

@./node_modules/primevue/components/toast/Toast.vue

@./node_modules/primevue/toast.js

@./src/main.js

Я импортирую компонент следующим образом:

import Vue from "vue";
import App from "./App/App.vue";
import Toast from 'primevue/toast';
import ToastService from 'primevue/toastservice';

Vue.use(ToastService);
Vue.component('Toast', Toast);

new Vue({
  render: h => h(App)
}).$mount("#app");

Я уже пробовал импортировать / использовать компонент Toast в моем App.js или в других файлах, где я в основном хочу безуспешно использовать эти тосты.

Если я оставлю Toast, все будет работать нормально, так что с ToastService все в порядке.

Так что, если есть кто-нибудь, кто использует primevue, а также столкнулся с этой проблемой и нашел решение, я заранее благодарю вас всех.

Answer 1

У меня есть решение для вашей второй ошибки, но я не знаю, как исправить вашу первую ошибку "Не удается устранить", так как я все еще пытаюсь понять ее.

Как выглядит ваша конфигурация веб-пакета? Вы указываете правило для файлов CSS? Если компонент использует<style> block вам нужно указать webpack, как с этим справиться.

Укажите правило для .css файлы, и это также будет применяться к <style> блоки в .vueфайлы. Без этого webpack не умеет разбирать блоки.

Так что убедитесь, что ваш webpack.config.js rules раздел содержит следующую часть CSS (или что-то подобное):

rules: [
    {
        test: /\.vue$/,
        use: 'vue-loader'
    },
    // the below will apply to both plain `.css` files AND `<style>` blocks in `.vue` files
    {
        test: /\.css$/,
        use: [
            'vue-style-loader',
            'css-loader'
        ]
    }
]

Также не забудьте установить соответствующие инструменты в свой package.json.

Я решил нечто подобное, поэтому см. Мой вопрос и ответ для получения более подробной информации.

Answer 2

npm install mitt

решает первую проблему. Он включен в devDependencies пакета primevue, но по некоторым причинам не установлен.