Feature Request: Better error message

[RoBorg]

Hi,

I just spent a while debugging this error: Failed to mount component: template or render function not defined.

It turns out I'd written import Line from 'vue-chartjs'; instead of import { Line } from 'vue-chartjs';

Would it be possible to have a better error message for this? Maybe by adding a render() method to the main exported object?

[apertureless]

Not really.
The error messages are produced by vue.js

The main object is a default export. So in general you can do

import Line from 'vue-chartjs'

It is not wrong per se. Because default exports can be named how you like it.

However if you console.log(Line) you will see that this object is not a vue component, its a collection of objects.

You then can access it over the . (dot) notation.

import Line form 'vue-chartjs'

export default {
 extends: Line.Line
}

would be perfectly fine.

There is also no way that I can produce error messages if someone is trying to mount a wrong component or object. Because this is all handled by vue.js

If you encounter this kind of error messages it is always good to console.log out the object. To see if its a valid vue component.

[RoBorg]

Hi,

Thanks for the quick response. You're saying the error comes from Vue, which is correct, but I'm saying it I don't think it has to (and would help catch mistakes for Vue noobs like myself).
I've just left work so I can't test this right now but what if index.js looked something like this:

const VueCharts = {
  Bar,
  HorizontalBar,
  Doughnut,
  Line,
  Pie,
  PolarArea,
  Radar,
  Bubble,
  Scatter,
  mixins,
  generateChart,
  render: function() { alert('You\'re trying to extend the main object instead of a component. Did you miss { } in your import statement?'); }
}

[apertureless]

Well this would work. However I would never alert() something out. 🙈
But I don't really see a huge benefit in this.

Even if you console.log or console.error out a message in a fake render function it could go unnoticed, because Vue.js would throw plenty of own errors.

Because the you extend your own components with the charts. Either over extend or mixins. So Vue.js would throw errors that the defined functions are not found, props or data is not found and so on.

So in the end you would have 3 or 4 additional error messages and the important one from the fake render function would be the first one any may be unseen due to the other error messages.

So I am not really sure if it is worth it. Maybe some other people would share their thoughts on this.

👐

[RoBorg]

I know alert sounds weird, but it is useful for something that's more like a compile-time error than a runtime error... it only happens if the programmer really screws up, and there's no missing it. Plenty of other projects use it that way. Even if you did go with console.log instead, at least the message would tell you exactly what was wrong.

I have no idea how many people run into this kind of error... maybe it's just me 😄