ERROR in ./node_modules/image-size/lib/index.js

[bishonen]

Plotly.js version: 1.58.4
Platform: mac bis sur

When upgrading plotly from 1.52.2 to 1.58.4 a new error appears when trying to run it in a react webpage:

ERROR in ./node_modules/image-size/lib/index.js
Module not found: Error: Can't resolve 'fs' in '/local/home/xxx/node_modules/image-size/lib'
 @ ./node_modules/image-size/lib/index.js 3:9-22
 @ ./node_modules/plotly.js/src/traces/image/helpers.js
 @ ./node_modules/plotly.js/src/traces/image/calc.js
 @ ./node_modules/plotly.js/src/traces/image/index.js
 @ ./node_modules/plotly.js/lib/image.js
 @ ./node_modules/plotly.js/lib/index.js
 @ ./src/util/ui/MultiChart.js
 @ ./src/xxx/xxx.js
 @ ./src/App.js
 @ ./src/index.development.js

Is there some new dependency which needs to be added?

[archmoj]

Duplicate of #5243, right?

[bishonen]

Duplicate of #5243, right?

Yes, seems to be related - the descriptions are at least almost the same.
I lack the expertise to understand why image-size was moved to a dependency, tbh. Could perhaps someone more knowledgeable explain in a sentence how this affects using plotly in a react app? In the browser, there isn't any 'fs', of course, thus the whole thing has to fail. Is there something simple I'm missing here?

[alexcjohnson]

I don't understand how image-size is (most of the time) avoiding looking for fs either. probe-image-size as discussed in #5243 certainly seems like a better option for us - it's explicitly meant for the browser, and we might even be able to do better on size by just bringing in the sync piece:

var sizeOf = require('probe-image-size/sync');

[rreusser]

All of my initial guesses proved false. The dist version of image-size has require('fs'). I can't find that Plotly runs the brfs transform when bundling, which would browserify fs calls:

plotly.js/tasks/util/browserify_wrapper.js

Line 44 in 3a501ef

browserifyOpts.transform = [];

In short, it's not clear to me.

[antoinerg]

FYI, I have no objection to replacing image-size with probe-image-size especially if we can only pick the sync part!

[archmoj]

All of my initial guesses proved false. The dist version of image-size has require('fs'). I can't find that Plotly runs the brfs transform when bundling, which would browserify fs calls:

plotly.js/tasks/util/browserify_wrapper.js

Line 44 in 3a501ef

browserifyOpts.transform = [];

In short, it's not clear to me.

@rreusser simply FYI we are using image-size@0.7.5 not image-size@@0.9.3 which liked above.
Suggestions are welcome : )

[archmoj]

Closing via #5388.

[archmoj]

@bishonen would you mind testing if the issue was resolved after #5388?

[bishonen]

@archmoj of course! That's the least I can do :)
I'd test if after there's a new release, though, as I am not sure in what other way I could pull this change into a react app.

[archmoj]

@bishonen in fact we are more interested to test this before next release which might take weeks.
Could you somehow load this latest build in your app?

[bishonen]

@archmoj
I tried placing that build and simply replacing my plotly import in a react app to the file, but it fails to compile due to something else

Unexpected character '€' (4071:43)