ReferenceError: document is not defined

[silviubogan]

This dependency makes it impossible to use plotly.js in the browser because image-size uses fs module which is not available in browsers. I do not know how does react-plotly.js adapt to this dependency but I guess they have this issue too.

Related to: #5119.

Reproducible example

1. Create an app with create-react-app.
2. Install dependencies from the screenshot below (you might need to change the React and ReactDOM packages' versions too), including plotly.js@1.57.1 and use it as a dynamic import with @loadable/component.
3. Run yarn start in the project directory.

Screenshot

Expected output

The app runs well without terminal or browser errors.

Actual output

Error inside browser window:

Update

The essence of this issue is here: #5243 (comment)

[silviubogan]

Sorry, I think it is a configuration problem on my side. It seems to work with create-react-app. I am closing this because of this.

[silviubogan]

I get the same error again and in a similar situation, so I think it is real. This time I have more information. We use plotly.js 1.57.0 and react-plotly.js 2.5.0. The code is here and the situation in images is:

Browser window contents

DevTools console

react-plotly.js errors

Our code's errors

plotly.js errors

I will try to reproduce this issue in a create-react-app project and come with an update.

Thank you.

[silviubogan]

I think that the following error might be related to the same issue:

[silviubogan]

I have tested and the screenshot in my message above is the root cause of this issue.

In chronological order:

1. I start the server.
2. I open the browser with the web app URL.
3. The error in my previous message appears in the terminal and approximatively at the same time in the browser I get this:
   
4. Refreshing the page in the browser makes the server skip the error and in the browser I see the first errors in this issue.

[archmoj]

@silviubogan could you investigate if probe-image-size depends on fs? And if it does not, can we replace image-size here?

plotly.js/src/traces/image/helpers.js

Line 11 in e62219a

var sizeOf = require('image-size');

[silviubogan]

In our code, the issue is that these instructions (just them, as I verified), when not commented out, produce the error related to the fs module, although I was thinking this is impossible since I tested them in a context where they are not used anywhere:

const LoadableBasicPlotly = loadable.lib(() =>
  import('plotly.js/lib/index-basic'),
);
const LoadableCartesianPlotly = loadable.lib(() =>
  import('plotly.js/lib/index-cartesian'),
);
const LoadableGeoPlotly = loadable.lib(() => import('plotly.js/lib/index-geo'));
const LoadableGl3dPlotly = loadable.lib(() =>
  import('plotly.js/lib/index-gl3d'),
);
const LoadableGl2dPlotly = loadable.lib(() =>
  import('plotly.js/lib/index-gl2d'),
);
const LoadableMapboxPlotly = loadable.lib(() =>
  import('plotly.js/lib/index-mapbox'),
);
const LoadableFinancePlotly = loadable.lib(() =>
  import('plotly.js/lib/index-finance'),
);

I still do not understand how loadable.lib works. I thought it lazy loads the libraries, so if none of the consts above are used, as I tested, the error related to fs is not justified.

I start investigating the probe-image-size library now, if nothing else more important intervenes.

Thank you!

[silviubogan]

The probe-image-size library does not require fs and, they say, finds the length only through HTTP. An example usage is this:

  it('should return content-length', async function () {
    responder = function (req, res) {
      res.writeHead(200, { 'Content-Length': 1234 });
      res.end(GIF1x1);
    };


    let size = await probe(url);


    assert.strictEqual(size.width, 1);
    assert.strictEqual(size.height, 1);
    assert.strictEqual(size.length, 1234);
    assert.strictEqual(size.mime, 'image/gif');
  });

(via this link)

But its internal functions are easy to use and extend. If time allows me to do this, I can try to use it for your use cases.

[nicolaskruchten]

I could be way off the mark here but the document is not defined error suggests to me that you're trying to use this module in a NodeJS context rather than a browser context, which is not really a supported use-case at all... Is that indeed what you're trying to do?

[silviubogan]

I could be way off the mark here but the document is not defined error suggests to me that you're trying to use this module in a NodeJS context rather than a browser context, which is not really a supported use-case at all... Is that indeed what you're trying to do?

Yes, more precisely we use razzle with SSR. I hope that SSR is supported.

Thank you.

[nicolaskruchten]

Unfortunately, pure-Javascript SSR is not officially supported at this time and I'm not aware of anyone having successfully done it unofficially, due to this exact issue. Plotly.js relies extensively on browser APIs which are generally not available or hard to emulate on the server short of running a full in memory browser like we do in the Kaleido project.

[silviubogan]

PTAL and help me solve this issue. Is it an issue in @loadable/component?

In our code, the issue is that these instructions (just them, as I verified), when not commented out, produce the error related to the fs module, although I was thinking this is impossible since I tested them in a context where they are not used anywhere:

const LoadableBasicPlotly = loadable.lib(() =>
  import('plotly.js/lib/index-basic'),
);
const LoadableCartesianPlotly = loadable.lib(() =>
  import('plotly.js/lib/index-cartesian'),
);
const LoadableGeoPlotly = loadable.lib(() => import('plotly.js/lib/index-geo'));
const LoadableGl3dPlotly = loadable.lib(() =>
  import('plotly.js/lib/index-gl3d'),
);
const LoadableGl2dPlotly = loadable.lib(() =>
  import('plotly.js/lib/index-gl2d'),
);
const LoadableMapboxPlotly = loadable.lib(() =>
  import('plotly.js/lib/index-mapbox'),
);
const LoadableFinancePlotly = loadable.lib(() =>
  import('plotly.js/lib/index-finance'),
);

I still do not understand how loadable.lib works. I thought it lazy loads the libraries, so if none of the consts above are used, as I tested, the error related to fs is not justified.

I start investigating the probe-image-size library now, if nothing else more important intervenes.

Thank you!

[silviubogan]

It seems that after commenting all the other loadable.lib calls in the message above, from these remaining two:

const LoadableBasicPlotly = loadable.lib(() =>
  import('plotly.js/lib/index-basic'),
);
const LoadableCartesianPlotly = loadable.lib(() =>
  import('plotly.js/lib/index-cartesian'),
);

the first one alone does not produce the error with fs, but when uncommenting the second one, the error is there. What could be the issue? Is it a Loadable issue?

Thank you.