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

Question

I'm currently starting a new project with vuejs and wanted to use primevue for some components. My knowledge with VueJS in general is not the best, because I'm just getting started with it. My application has a webpack based build with vue-loader configured, so thats how primevue is getting installed.

I was trying to use the Toast-Component, but when importing Toast from 'primevue/toastservice' webpack throws these two errors:

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

and

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

I import the Component as following:

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

I already tried importing/using the 'Toast' component in my App.js or in other files where i mainly wanna use those Toasts without success.

If I leave out the Toast all works fine, so the ToastService seems alright.

So if theres anybody who uses primevue and also ran into this problem and found a solution I thank you all in advance.

redfox05 redfox05 · Accepted Answer · 2020-05-26T11:56:32

I have a solution for your second error, but not sure how to fix your first "Can't resolve" error, as I am still figuring that one out.

What does your webpack config look like? Do you specify a rule for CSS files? If the component uses a <style> block you need to tell webpack how to handle this.

Specify a rule for .css files, and it will also apply the same to <style> blocks in .vue files. Without this, webpack does not know how to parse the blocks.

So make sure your webpack.config.js rules section has the following CSS part in it (or something similar):

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'
        ]
    }
]

Also make sure to install the relevant tools in your package.json.

I solved something similar, so see my question and answer for more detailed info.

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

2 Answers