t.component is not a function

[madStitcher]

I'm getting the error "t.component is not a function" on render for this component, and it points to at n (highcharts-vue.min.js:1)

<template>
    <div>
      <highcharts-vue :options="chartOptions" ref="lineCharts"></highcharts-vue>
    </div>
</template>

<script>
import HighchartsVue from 'highcharts-vue'
import Highcharts from 'highcharts'

import { feedStatsService } from '../../_services';

export default {
  components: {
      HighchartsVue
  },
  props: ['feedID'],
  data () {
    return {      
      points: [],
      chartOptions: {
        xAxis: {
            type: 'datetime'
        },        
        chart: {
          type: 'line'
        },
        title: {
          text: 'Total Number of Listens'
        },
        series: [{
          data: this.points,
          color: '#6fcd98'
        }]
      }
    }
  },
  created () {
    feedStatsService.getListens(this.feedID)
        .then(
            results => {  
              this.points = results.map(function(e){
                return [moment.utc(e.date).valueOf(), e.total_first_listens]
              });
            },
            error => {
                // dispatch('alert/error', error, { root: true });
                console.error(error);
            }
        )
  },
  watch: {
    points (newValue) {
      this.chartOptions.series[0].data = newValue
    }
  }
}
</script>

[Denyllon]

Hi @madStitcher ,

Appreciate you contacting us.

I assume, the problem is with the way of importing and assigning the highcharts-vue component within your component. Actually, you've imported the whole highcharts-vue module as HighchartsVue and trying to register it as a component here:

import HighchartsVue from 'highcharts-vue'
import Highcharts from 'highcharts'

import { feedStatsService } from '../../_services';

export default {
  components: {
      HighchartsVue
  }
...

Unfortunately, that way of registering a component is not compatible. You should import just a component object from highcharts-vue module, and register it in agree with Vue documentation. Please take a look at code below:

import {Chart} from 'highcharts-vue'

export default {
  components: {
    highcharts: Chart
  },

<template>
    <div>
      <highcharts-vue :options="chartOptions" ref="lineCharts"></highcharts-vue>
    </div>
</template>

Live example: https://codesandbox.io/s/kxzmw8jp5 Documentation: https://github.com/highcharts/highcharts-vue#registering-locally-in-your-component

Kind regards!

[Denyllon]

Closing the issue, due to lack of activity. Please reopen it in case of any further questions.