plotly.js v1.52.3: Cannot read property 'key' of undefined

[phanos-engineer]

I tried using the latest plot.ly/javascript and came across this error.

I was unable to make a plot with a simple webpage.

I included <script src="https://cdn.plot.ly/plotly-latest.js"></script> which is using version v1.52.3.

plotly-latest.js:111859 Uncaught TypeError: Cannot read property 'key' of undefined
    at HTMLCanvasElement.<anonymous> (plotly-latest.js:111859)
    at bind (plotly-latest.js:25804)
    at Array.d3_selectionPrototype.data (plotly-latest.js:25857)
    at drawFramework (plotly-latest.js:111847)
    at Object.lib.syncOrAsync (plotly-latest.js:106537)
    at Object.plot (plotly-latest.js:112017)
    at Object.newPlot (plotly-latest.js:112287)

The issue seems to be on line 11859

// draw framework first so that margin-pushing
    // components can position themselves correctly
    var drawFrameworkCalls = 0;
    function drawFramework() {
....
            }], function(d) { return d.key; });

the variable d is undefined when this line gets called. Should there be some error handling or is there some previous step missing?

Attached is an example html file that tries to make a plot and comes across this error.
testplotly.txt

[antoinerg]

Hello @PhanosTech and thank you for reporting this error.

I turned your testplotly.txt file into a Codepen: https://codepen.io/antoinerg/pen/JjdyXWY . However, it seems to run fine on my end and I do not get any error in the console 🤔 Can you confirm that you get this issue in the Codepen I provided?

[phanos-engineer]

I figured out the problem !!!

When calling Plotly.newPlot(document.getElementByID("mydiv")...) make sure the div that you pass is empty first!

// empty the div
$("#mydiv").html("");
// make the plot
Plotly.newPlot(document.getElementByID("mydiv")...)

[phanos-engineer]

Hello @PhanosTech and thank you for reporting this error.

I turned your testplotly.txt file into a Codepen: https://codepen.io/antoinerg/pen/JjdyXWY . However, it seems to run fine on my end and I do not get any error in the console 🤔 Can you confirm that you get this issue in the Codepen I provided?

Thank you for taking a look at the issue. I realized the issue happened when the div that I passed to Plotly was not empty. In the example I uploaded, I stripped everything inside the div which made it work.

To be specific, I had a Bootstrap Chart as a visual placeholder until the Plotly Chart loaded. I assumed that Plotly would empty the div and add the plot. This issue was caused by some collision between the Bootstrap Chart and Plotly in the same div.