Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error in nextTick: "RangeError: Maximum call stack size exceeded" #169

Closed
ssuess opened this issue Aug 15, 2017 · 5 comments
Closed

Error in nextTick: "RangeError: Maximum call stack size exceeded" #169

ssuess opened this issue Aug 15, 2017 · 5 comments

Comments

@ssuess
Copy link

ssuess commented Aug 15, 2017

Expected Behavior

Followed your example exactly, and expected to see an example chart.

Actual Behavior

get a blank page and the error message: Error in nextTick: "RangeError: Maximum call stack size exceeded"

This happens whether I route to the component alone, or try to include it in a parent vue. I notice that when installing via npm, there is an unmet peer dependency of vue 2.4.2 (I have 2.3.4 for compatibility reasons with quasar), but even upgrading vue to that version results in the same error.

Environment

  • vue.js version: 2.3.4 (also tried with 2.4.2)
  • vue-chart.js version: 2.8.2
  • npm version: 4.2.0
  • quasar version: 0.14.0

Code

Here is the exact code of my Barchar.vue file:

<template>
<bar-chart></bar-chart>
</template>
<script>
import {Bar} from 'vue-chartjs'

export default Bar.extend({
  name: 'BarChart',
  components: {
    Bar
  },
  data () {
    return {
      datacollection: {
        labels: ['January', 'February'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20]
          }
        ]
      }
    }
  },
  mounted () {
    console.log(this.datacollection)
    this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
  }
})
</script>

<style>
</style>

Also tried multiple variations of component export or not components: { 'bar-chart': Bar }, components: { Bar }, naming or not name: BarChart etc, with no difference to blank page except that the error would change to Error in mounted hook: "TypeError: Cannot read property 'getContext' of undefined"

@ssuess
Copy link
Author

ssuess commented Aug 15, 2017

UGH. Of course I just found the answer here: remove the template tags...

@ssuess
Copy link
Author

ssuess commented Aug 15, 2017

Btw, I think this is a CRITICAL thing to mention in the docs, I spent a long time trying to figure it out.

@ssuess ssuess closed this as completed Aug 15, 2017
@apertureless
Copy link
Owner

The unmet peerDependency is only a notice.
I try to keep up with the latest vue releases. But as it is a peerDependency only, you are free to install the version you like. And it should work no matter what.

And the error in mounted hook: "TypeError: Cannot read property 'getContext' of undefined" is because there is no merge strategy in vue for templates. Only for props/data/methods etc. if you extend it.

I will add a section in the docs. ✌️

@Quadriphobs1
Copy link

I just noticed that at time when using non-valid HTML tags it might cause this as well

@phanchanra
Copy link

The same problem, Even if I delete the template, an error will still occur. TypeError: Cannot read property 'getContext' of undefined

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants