TypeError: undefined is not a function (near '...', click).transition().duration(750).att...')

[michchan]

I used PieChart in a component. It works when it first rendered. But I got this error after any state update: TypeError: undefined is not a function (near '...', click).transition().duration(750).att...') logCapturedError — react-dom.development.js:16477

This is how I used the PieChart:

<PieChart
    size={CHART_SIZE}
     data={[
           { key: 'A', value: 100, color: CHART_RED },
           { key: 'B', value: 200, color: CHART_ORANGE },
          { key: 'C', value: 50, color: CHART_YELLOW },
          { key: 'D', value: 50, color: CHART_GREEN },
           { key: 'E', value: 50, color: CHART_BLUE },
      ]}/>                            

It works when I forked from the repo and comment out the some lines of codes (transition) like this:

    if (n) { // we don't need to do this, but it's fun
      /*
       * Change current slices
       * Transition current slice dimensions
       */
      path
        .attr('fill', getSliceFill)
        .on('mouseover', mouseover)
        .on('mouseout', mouseout)
        .on('mousemove', mousemove)
        .on('click', click)
        // .transition()
        // .duration(750)
        // .attrTween('d', this.tweenSlice);

      /*
       * Add new slices
       */
      path
        .enter()
        .append('path')
        .attr('class', 'pie-chart-slice')
        .attr('fill', getSliceFill)
        .on('mouseover', mouseover)
        .on('mouseout', mouseout)
        .on('mousemove', mousemove)
        .on('click', click)
        .each((d, i) => currentSlices.splice(i, 1, d))
        // .transition()
        // .duration(750)
        // .attrTween('d', this.tweenSlice);
    }

Versions: react-easy-chart: 1.0.0 react: ^16.6.0 react-dom: ^16.6.0

[dharnnie]

Same here

[samad324]

You can solve this issue by going in: node_modules > react-ease-chart > lid > pie-chart > hybrid > index.js in index.js you just have to remove

.transition().duration(750).attrTween('d', this.tweenSlice);

that line from:

path.enter().append('path').attr('class', 'pie-chart-slice').attr('fill', getSliceFill).on('mouseover', mouseover).on('mouseout', mouseout).on('mousemove', mousemove).on('click', click).each(function (d, i) {return currentSlices.splice(i, 1, d); }).transition().duration(750).attrTween('d', this.tweenSlice);

this block of code!

I hope this will solve your problem!

[dharnnie]

Is this safe (editing node_modules by hand). I'm trying it now.

[samad324]

yeah! there is no bad in it!

[dharnnie]

Okay. When I do, the error starts coming from several other lines. I have to remove those as well yh?

On editing node_modules - When next I do an npm install, the lines will come back yh...

[samad324]

yes! you have to remove .transition() method from all lines! and you have to move the react-easy-chart folder from node_modules to another place! and require it from that path! and don't remove it from package.json! hope it will help.

[dharnnie]

Thanks a lot. It works.

My 2 cents: You have to restart the app to reflect node_modules changes. I had to do that.

[jhchill666]

Ok, this is a massive blocker to using react-easy-chart. Editing node_modules is not a valid solution. Is clearly a bug with the module, and needs fixing at source :(