nandi95 / vue-toastify

🔥 Simple, extendable, dependency free notification plugin. 🔥
https://vue-toastify.netlify.app/
MIT License
228 stars 12 forks source link

Error in render: "TypeError: Cannot read property 'length' of undefined" #10

Closed kothemel closed 4 years ago

kothemel commented 4 years ago

Hi!

I have installed the vue-toastify 1.5.0 and upgraded my vue to 2.6.11. I followed the steps according to README and every time I call the this.$vToastify command everything is working fine except the icon (success, warning, error). During inspect on my web app I see the following errors:

  1. Error in render: "TypeError: Cannot read property 'length' of undefined"

  2. TypeError: Cannot read property 'length' of undefined at VueComponent.containerClasses (vue-toastify.umd.min.js?5ff6:1) at Watcher.get (vue.esm.js?efeb:4488) at Watcher.evaluate (vue.esm.js?efeb:4593) at Proxy.computedGetter (vue.esm.js?efeb:4845) at Proxy.m (vue-toastify.umd.min.js?5ff6:1) at VueComponent.Vue._render (vue.esm.js?efeb:3557) at VueComponent.updateComponent (vue.esm.js?efeb:4075) at Watcher.get (vue.esm.js?efeb:4488) at new Watcher (vue.esm.js?efeb:4477) at mountComponent (vue.esm.js?efeb:4082)

Note that I'm running on Node v13.6.0. Could you please assist?

nandi95 commented 4 years ago

I cannot seem to replicate. However I believe I found the issue (in the Icon component as per the error, I'm checking the length of undefined). To clarify you have used this.$vToastify.success("body"); and you got this error? Do you have a codesandbox or something where I can try as I can't seem to replicate on the playground site. @kothemel

kothemel commented 4 years ago

Unfortunately, I don't have a codesandbox. Let me show you my steps. After installation to the latest version, I added to main.js:

import VueToastify from "vue-toastify";

Vue.use(VueToastify, {
  errorDuration: 2000,
  warningInfoDuration: 1000,
  successDuration: 800,
  singular: false,
  position: "bottom-center"
});

and then in my App.vue

this.$vToastify.success({ title: "Logged in!", body: "" });

Could it be a mismatch on package dev dependencies? README mentions that all you need is the latest Vue.

nandi95 commented 4 years ago

Okay, I have pushed and tested a fix. Can you please confirm it works for you too? @kothemel

kothemel commented 4 years ago

Yeap, the icons appear correctly!