PrimeVue Toast Component Error: Can't resolve './ToastMessage' in */toast

Question

我目前正在使用 vuejs 开始一个新项目，并希望将 primevue 用于某些组件。总的来说，我对 VueJS 的了解不是最好的，因为我才刚刚开始使用它。我的应用程序有一个基于 webpack 的构建，配置了 vue-loader，所以这就是安装 primevue 的方式。

我试图使用 Toast 组件，但是当从 'primevue/toastservice' webpack 导入 Toast 时抛出这两个错误：

ERROR in ./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&)

Module not found: Error: Can't resolve './ToastMessage' in '*/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

和

ERROR in ./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/Toast.vue?vue&type=style&index=0&lang=css&) 97:0

Module parse failed: Unexpected token (97:0)

File was processed with these loaders:

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

You may need an additional loader to handle the result of these loaders.

|

|

-> .p-toast {

| position: fixed;

| width: 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");

我已经在我的 App.js 或其他我主要想使用这些 Toasts 的文件中尝试 importing/using 'Toast' 组件但没有成功。

如果我省略了 Toast，一切正常，那么 ToastService 似乎没问题。

因此，如果有人使用 primevue 并且运行解决了这个问题并找到了解决方案，我提前感谢大家。

Answer 1

我有解决你的第二个错误的方法，但不确定如何解决你的第一个 "Can't resolve" 错误，因为我还在想办法解决这个问题。

你的 webpack 配置是什么样的？您是否为 CSS 个文件指定了规则？如果组件使用 <style> 块，你需要告诉 webpack 如何处理它。

为.css个文件指定一个规则，它也将同样适用于.vue个文件中的<style>个块。没有这个，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

解决了第一个问题。它包含在 primevue 包的 devDependencies 中，但由于某些原因未安装。

PrimeVue Toast Component Error: Can't resolve './ToastMessage' in */toast

PrimeVue Toast Component Error: Can't resolve './ToastMessage' in */toast

npm

webpack

vue.js

primevue