Webpack v5 compatibility issue (with workaround)

[kostyfisik]

With Webpack v5 I failed to run plotly.js, it requires additional stream and assert libs. The complete problem description is available here quasarframework/quasar#11229

As I was pointed Webpack v5 removed the Nodejs polyfills for the web client builds. It seems that plotly.js for the web client rely on Nodejs API , and I get errors saying that some packages are missing. These probably need to be addressed by the plotly.js communty.

For users, if you just want to run your app/website (with a bit of risk), then you can manually install node-polyfill-webpack-plugin which solves the problem.

[mtgraves]

Has there been any movement on this? This impacts multiple CRA apps of mine. I'd like to not have to eject and polyfill. I'd also like to keep using plotly.js in these apps as the package is awesome.

[jmacura]

Crazy that this issue is not affecting many more users and driving more attention.

[ZodiacWind]

Same issue. Need HELP, too.

[mtgraves]

@jmacura @ZodiacWind

...if it helps, for my react apps I ended up getting things to work by switching from importing like this:

import Plotly from "plotly.js";
import createPlotlyComponent from 'react-plotly.js/factory';

const Plot = createPlotlyComponent(Plotly);

to simply...

import Plot from 'react-plotly.js';

and I also (maybe related...maybe not but including for completeness) switched from the full plotly to a minified version. So my package.json went from:

"dependencies": {
    ...
    "plotly.js": "^1.58.4",
    "react-plotly.js": "^2.5.1",
    "react-scripts": "^4.0.3",
    ...
  },

to...

"dependencies": {
    ...
    "plotly.js-basic-dist-min": "^2.8.3",
    "react-plotly.js": "^2.5.1",
    "react-scripts": "5.0.0",
    ...
  },

Hope that helps?

[jmacura]

@mtgraves Thanks for the tip, but mine is not a react-app, so it is not a relevant workaround.

In my case, I have had to switch from
"plotly.js" and "@types/plotly.js"
to
"plotly.js-dist-min" and "@types/plotly.js-dist-min"

[ZodiacWind]

@mtgraves Thanks. I will have a try.

In my case, I have had to switch from "plotly.js" and "@types/plotly.js" to "plotly.js-dist-min" and "@types/plotly.js-dist-min"

@jmacura What's the difference betwenn "plotly.js" and "plotly.js-dist-min"? Thank you.

[jmacura]

@ZodiacWind as the npm documentation says, plotly.js-dist-min is the "Ready-to-use minified plotly.js distributed bundle."
So functionally, there should be no difference.

[ZodiacWind]

@jmacura That's great. Thanks for the information.

[NuclearPhoenixx]

@mtgraves Thanks for the tip, but mine is not a react-app, so it is not a relevant workaround.

In my case, I have had to switch from "plotly.js" and "@types/plotly.js" to "plotly.js-dist-min" and "@types/plotly.js-dist-min"

Worked for me as well, so thanks a lot for saving me a headache!

I was actually afraid to use any type definitions other than @types/plotly.js since they are all listed as long-outdated (months). However, they actually just re-import the type definitions for @types/plotly.js it looks like, so it's fine!