Plotly.js: Custom Partial Bundle - Scatter3d - Not working.

[mithi]

I'm trying to load my own custom partial bundle, because I only need the Scatter3d. I was not successful. There might be a bug which might be related to issue: -https://github.com/plotly/plotly.js/issues/4883

Here's the code sandbox link and screenshot.

• https://codesandbox.io/s/proud-dawn-i907r?file=/src/App.js:183-206

I found these related issues to help me with this

• https://github.com/plotly/plotly.js/issues/4883 (no calendar on partial bundles)
• https://github.com/plotly/plotly.js/issues/4891 (How to reduce bundle size of Plotly.js for 3D surface chart?)

Here's the sandbox of my actual project which is working fine currently because i'm using the plotly partial bundle (OK)

• https://codesandbox.io/s/nervous-water-7rwhh?file=/src/components/HexapodPlot.js
  

Here's the sandbox where I'm using a custom partial bundle (NOT OK)

• https://codesandbox.io/s/patient-rgb-knowb?file=/src/components/CustomPlot.js

This is the only difference between the two:

• https://github.com/mithi/hexapod/blob/custom-plotly-bundle-error/src/components/CustomPlot.js
• https://github.com/mithi/hexapod/blob/custom-plotly-bundle-error/src/components/HexapodPlot.js

import Plotly from "plotly.js/lib/core";
import Scatter3d from "plotly.js/lib/scatter3d"
import createPlotlyComponent from "react-plotly.js/factory";
Plotly.register([Scatter3d]);

const CustomPlotly = createPlotlyComponent(Plotly);
export default CustomPlotly;

Console log errors when running on local

react_devtools_backend.js:2273 WARN: webgl setup failed possibly due to enabling preserveDrawingBuffer config. 
The device may not be supported by is-mobile module! 
Inverting preserveDrawingBuffer option in second attempt to create webgl scene.

On Chrome Version 84.0.4147.89 (Official Build) (64-bit), MacBook Pro (Retina, 13-inch, Mid 2014)
MacOs Catalina 10.15.5

Also happens on firefox 78.0.2 (64-bit)

Additional info # 1

I experimented with https://github.com/mithi/plotly-webpack
and was somewhat successful (I wasn't able to load the paper background)...
I found out that I can reproduce my plot having only a gzipped bundle size of ~410kb. This is significantly lower than when I use plotly.js-gl3d-dist-min - The latter has a gzipped bundle size of ~450kb

Additional info # 2

Importing all the requirements here https://github.com/plotly/plotly.js/blob/master/lib/index-gl3d.js

    require('./scatter3d'),
    require('./surface'),
    require('./mesh3d'),
    require('./isosurface'),
    require('./volume'),
    require('./cone'),
    require('./streamtube')

produces the same error discussed above ... while Commenting out Plotly.register([Scatter3d]); Will remove the error and produce the following

I also saw this issue which might be related https://github.com/plotly/plotly.js/issues/4989
But i don't know how to fix it in my case.

Any help is appreciated! Thanks!

[mithi]

SOLVED

Needed to add ify

• https://github.com/mattcorner/plotly-surface-connectgaps-error/blob/master/config-overrides.js
• https://github.com/plotly/plotly.js/issues/2502

Still isnt 100 percent okay, paper background isn't showing up.

[mithi]

Background is now showing, I just needed to include mesh3d for the paper background to show

import Plotly from "plotly.js/lib/core";
import Scatter3d from "plotly.js/lib/scatter3d"
import Mesh3d from "plotly.js/lib/mesh3d"

import createPlotlyComponent from "react-plotly.js/factory";
Plotly.register([Scatter3d, Mesh3d]);

const CustomPlotly = createPlotlyComponent(Plotly);
export default CustomPlotly;

[archmoj]

Thanks very much @mithi for the updates.
Also please consider submitting a PR here or to https://github.com/plotly/plotly-webpack,
if you think it should be updated considering latest dependency changes.