Error: No d3.js compatbility nester registered, load v5 or v6 compability layer.

[rodryquintero]

Got this error No d3.js compatbility nester registered, load v5 or v6 compability layer. when trying to render a series chart. I include the part of the code that does the chart render.

import { SeriesChart, LineChart, units } from "dc";
import { curveCardinal } from "d3-shape";
import { scaleLinear, scaleTime } from "d3-scale";

let height = "280";
let width = "";
let style = "width:100%";

 let dimension = data.dimension((d) => [d.gender, d.height]);
 let group = dimension.group().reduceCount();

 let valueAccessor = "";
 let keyAccessor = "";
 let seriesAccessor = "";
 let x = "";

let from = new Date(new Date().setDate(today.getDate() - 30));
let to = new Date() - 

let chart = new SeriesChart(e);
    chart
      .height(height)
      .width(width)
      .chart((c) => {
        return new LineChart(c).curve(curveCardinal);
      })
      .x(scaleTime().domain([from,to]))
      .elasticY(true)
      .dimension(dimension)
      .group(group)
      .valueAccessor((d) => +d.value)
      .seriesAccessor((d) => d.key[1])
      .keyAccessor((d) => d.key[0])
      .render();

[kum-deepak]

Great to see that you are using dc as a module. When used as a module, you would need to explicitly include one of the compat layers - https://github.com/dc-js/dc.js/tree/develop/src/compat. Let me know if it helps.

In non-module usage, it is not explicitly needed.

[rodryquintero]

Thanks for the quick reply. How should I use it? Import it as a module? If so, is this a function that needs to be executed?

Thanks in advance

[nabraham]

In my vue application, this is all that was required:

import "dc/src/compat/d3v6";  // needed for DataTable to render