VueJS/NextJS: Cannot read property 'prototype' of undefined

[queenvictoria]

Hi there. This is the issue I was trying to debug in my local. The tests pass locally but still were throwing an error. So I've replicated it in this sandbox: https://codesandbox.io/s/eloquent-bardeen-fyi1cv?file=/pages/index.vue

Can you see what's going wrong? Have I done something silly?

[stockiNail]

I had a look to the sandbox but it seems correct. It's weird to see the error in isForType method which is an internal of CHART.JS core. Probably it also depends on my lack of knowledge in VueJS/NextJS.

[queenvictoria]

Thanks @stockiNail . If I remove the treemap module the error goes away and I can draw other kinds of charts. I'll see if I can import other controllers.

Without other controllers Chart JS works fine: https://codesandbox.io/s/xenodochial-thunder-dih73f?file=/pages/index.vue

Graph controller has the same issue as treemap is working well: https://codesandbox.io/s/modest-julien-lmhrf4?file=/pages/index.vue

Choropleth works well: https://codesandbox.io/s/wild-grass-hznzt4?file=/pages/index.vue

I'll dig in.

[queenvictoria]

Ok moving the register call into the mounted hook resolves the issue for me. This is derived from a comment about React needing the DOM element to exist (the ref created) before registering the component.

FAILS

import { Chart, LinearScale } from "chart.js";
import { TreemapController, TreemapElement } from "chartjs-chart-treemap";
Chart.register(LinearScale, TreemapController, TreemapElement);

export default {
  data() {
    return {
      // Data that will hold the Chart.js instance.
      chart: null,
    };
  },

  mounted() {
    const config = {...}
  }
}

SUCCEEDS

import { Chart, LinearScale } from "chart.js";
import { TreemapController, TreemapElement } from "chartjs-chart-treemap";

export default {
  data() {
    return {
      // Data that will hold the Chart.js instance.
      chart: null,
    };
  },

  mounted() {
    // **** Moved to after mounted (i.e.: the DOM exists) ****
    Chart.register(LinearScale, TreemapController, TreemapElement); 
    const config = {...}
  }
}

[stockiNail]

@queenvictoria thank you very much for your feedbacks! Very helpful for me who am not so familiar with VUEJS and NEXTJS