PrimeVue Toast 组件错误：无法解析 */toast 中的“./ToastMessage”

Posted 2023-02-22

【中文标题】PrimeVue Toast 组件错误：无法解析 */toast 中的“./ToastMessage”

【英文标题】：PrimeVue Toast Component Error: Can't resolve './ToastMessage' in */toast

【发布时间】：2020-05-15 00:25:55

【问题描述】：

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

我尝试使用 Toast-Component，但是当从 'primevue/toastservice' webpack 导入 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&)

找不到模块：错误：无法解析“*/node_modules/primevue/components/toast”中的“./ToastMessage”

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

模块解析失败：意外令牌 (97:0)

文件是用这些加载器处理的：

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

您可能需要一个额外的加载器来处理这些加载器的结果。

|

|

-> .p-吐司

|位置：固定；

|宽度：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 或其他我主要想使用这些 Toast 的文件中导入/使用“Toast”组件但没有成功。

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

所以如果有人使用primevue并且也遇到了这个问题并找到了解决方案，我提前感谢大家。

【参考方案1】：

我为您的第二个错误提供了解决方案，但不确定如何解决您的第一个“无法解决”错误，因为我仍在解决这个问题。

你的 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 中安装相关工具。

我解决了类似的问题，请查看我的question and answer 了解更多详细信息。

【讨论】：

感谢您的回答！您对 webpack 配置的建议解决了第二个错误。我只需要将它与 scss 和 sass 规则正确结合。第一个对我来说仍然没有意义，但我已经完全切断了 primevue 并用 vuetify 替换它，因为它更适合我的应用程序。

【参考方案2】：

npm install mitt

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