title: Vue.js Uncaught TypeError: _vueChartjs.Line.extend is not a function
body: <p>Just starting Vue.js and webpack. I'm trying to add vue-chartjs functionality to my project. I'm receiving the following error:</p>
  
  <pre><code>Uncaught TypeError: _vueChartjs.Line.extend is not a function
  at Object.defineProperty.value (..\..\CommodityChart.vue:5)
  at __webpack_require__ (bootstrap 7040a42393b737f78245:659)
  at fn (bootstrap 7040a42393b737f78245:85)
  at Object.&lt;anonymous&gt; (CommodityChart.vue:3)
  at __webpack_require__ (bootstrap 7040a42393b737f78245:659)
  at fn (bootstrap 7040a42393b737f78245:85)
  at Object.defineProperty.value (..\..\fetch-data.vue:36)
  at __webpack_require__ (bootstrap 7040a42393b737f78245:659)
  at fn (bootstrap 7040a42393b737f78245:85)
  at Object.&lt;anonymous&gt; (fetch-data.vue:7)
  </code></pre>
  
  <p>in my package.json</p>
  
  <pre><code>"dependencies": {
  "axios": "^0.15.3",
  "bootstrap-vue": "^1.0.0-beta.9",
  "chart.js": "^2.7.1",
  "core-js": "^2.4.1",
  "font-awesome": "^4.6.3",
  "vue": "^2.1.8",
  "vue-chartjs": "^3.0.0",
  "vue-router": "^2.1.1",
  "vue-server-renderer": "^2.1.8",
  "vue-template-compiler": "^2.1.8",
  "vuex": "^2.1.1",
  "vuex-router-sync": "^4.0.1"
  </code></pre>
  
  <p>},</p>
  
  <p>I can see the dependencies in my node_modules folder (chart.js and vue-chartjs).</p>
  
  <p>my .vue file that is throwing the error looks like:</p>
  
  <pre><code>&lt;script&gt;
    //Importing Line class from the vue-chartjs wrapper
    import { Line } from 'vue-chartjs'
    //Exporting this so it can be used in other components
    export default Line.extend({
      data () {
        return {
          datacollection: {
          //Data to be represented on x-axis
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            datasets: [
              {
                label: 'Data One',
                backgroundColor: '#f87979',
                pointBackgroundColor: 'white',
                borderWidth: 1,
                pointBorderColor: '#249EBF',
                //Data to be represented on y-axis
                data: [40, 20, 30, 50, 90, 10, 20, 40, 50, 70, 90, 100]
              }
            ]
          },
          //Chart.js options that controls the appearance of the chart
          options: {
            scales: {
              yAxes: [{
                ticks: {
                  beginAtZero: true
                },
                gridLines: {
                  display: true
                }
              }],
              xAxes: [ {
                gridLines: {
                  display: false
                }
              }]
            },
            legend: {
              display: true
            },
            responsive: true,
            maintainAspectRatio: false
          }
        }
      },
      mounted () {
      //renderChart function renders the chart with the datacollection and options object.
        this.renderChart(this.datacollection, this.options)
      }
    })
  &lt;/script&gt;
  </code></pre>
  
  <p>Do i need to import/reference the chart libraries somewhere else in my entry js file? Webpack references? Project is working fine without the chart.vue file.</p>