Calling this.$toast.clear() doesn't clear any toasts (using Vite)

[shanehoban]

main.js

import Toaster from '@meforma/vue-toaster'

app.use(Toaster, {
  position: 'top',
  useDefaultCss: false,
  pauseOnHover: false
}).provide('toast', app.config.globalProperties.$toast)

Example.vue

<script setup>
import { inject } from 'vue'

const toast = inject('toast')

// this works
function showToast (type) {
  toast.show(`This is the ${type} type toast.`, {
    type: type,
    duration: false
  })
}

// only works when vue-toaster is local in my projects src folder :S
function clearToasts () {
  toast.clear()
}
</script>

package.json

...
"@meforma/vue-toaster": "^1.3.0",
"vue": "^3.2.31",

Ty, otherwise all works perfectly.

[shanehoban]

To follow up on this, I pulled in vue-toaster into my project src folder to add logs etc. and try debug -> now it works 🤷

So, not working from node_modules but is working when pulled into my project directly...

[shanehoban]

Related stack overflow question: https://stackoverflow.com/questions/71929957/meforma-vue-toaster-clear-function-only-works-when-pulled-into-local-project-fo

Could this issue be related to using vite? Seems like it works with vue cli... not sure yet..

[shanehoban]

Adding stackblitz (vite) example here too: https://stackblitz.com/edit/vitejs-vite-uqcdgd?file=src%2Fmain.js,src%2FApp.vue

[shanehoban]

So after forking @meforma/vue-toaster, rewriting the Toaster in the composition API and changing the event bus to use mitt, even went as far as to publish it to npmjs so I could replicate everything as close as possible to how I use the package originally.... it turns out that my re-written package was having the exact same issue with Vite.

Digging in further, I noticed in my /node_modules/ there was a folder: /node_modules/.vite/deps/ which had files like: @shanehoban_vue-toaster.js... so I started googling and found out that perhaps I should exclude the package from Vite optimizations... like so:

vite.config.js

export default defineConfig({
  optimizeDeps: {
    exclude: [
      "@meforma/vue-toaster"
    ]
  },
  ....

And now, the clear... is working. I don't necessarily know why it works when Vite stops optimizing it. Not sure how the Vite optimization works, but hey...

[shanehoban]

This seems to be an issue with how Vite caches dependencies. duannx created an issue on Vite with this example: vitejs/vite#8158 which was apparently a duplicate of a previous issue: vitejs/vite#3910

[romain130492]

any update on this?

[stafyniaksacha]

Hi!
If fixed it on the #36 PR

You can try it with this in your package.json:

  "devDependencies": {
    "@meforma/vue-toaster": "stafyniaksacha/vue-toaster#feat/render-function",
  }