enable support for building in a static site (before window is defined)

[edwmurph]

Is your feature request related to a problem? Please describe.
I am trying to use this in a gatsbyjs project but the build step fails due to a reference error: window is not defined

Describe the solution you'd like
could this library defer loading any modules that reference window until it is available?
some ways to do this described here:
gatsbyjs/gatsby#309

Describe alternatives you've considered
this problem could also be solved on my end but i think a solution baked into your library would be more elegant.

Additional context
gatsbyjs error output posted in a below comment.

[edwmurph]

 ERROR

Building static HTML failed

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html ReferenceError: window is not defined


  79 | };
  80 |
> 81 | var THREE = window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
     | ^
  82 | : {
  83 |   BufferGeometry: BufferGeometry,
  84 |   Float32BufferAttribute: Float32BufferAttribute,


  WebpackError: ReferenceError: window is not defined

  - three-geojson-geometry.module.js:81 Module../node_modules/three-geojson-geometry/dist/three-geojs    on-geometry.module.js
    node_modules/three-geojson-geometry/dist/three-geojson-geometry.module.js:81:1

  - three-globe.module.js:1 Module../node_modules/three-globe/dist/three-globe.module.js
    node_modules/three-globe/dist/three-globe.module.js:1:1

  - globe.gl.module.js:1 Module../node_modules/globe.gl/dist/globe.gl.module.js
    node_modules/globe.gl/dist/globe.gl.module.js:1:1

  - react-globe.gl.module.js:1 Module../node_modules/react-globe.gl/dist/react-globe.gl.module.js
    node_modules/react-globe.gl/dist/react-globe.gl.module.js:1:1

  - index.js:1 Module../src/pages/index.js
    src/pages/index.js:1:1

[edwmurph]

actually for anyone else trying to use this with gatsby, the gatsby suggested solutions are here:
https://www.gatsbyjs.org/docs/using-client-side-only-packages/

the solution i initially vouched for in this ticket is also the first workaround on this list:

Workaround 1: Use a different library or approach
Sometimes the simplest approach is to work around the problem. If you can re-implement your component using a plugin which doesn’t break SSR, that’s probably best.

but short of that happening, i am currently using the 3rd workaround and it resolved the issue in a way that's not terrible.

[vasturiano]

Thanks for reaching out @edwmurph.

This module is not SSR compatible, mostly because of the inclusion of threejs. To work around this issue in a SSR app I would suggest importing the module dynamically and bypassing the SSR phase.

I'm not familiar enough with Gatsby to provide exact syntax, but in nextjs you can easily do this in this manner: https://nextjs.org/docs#dynamic-import

import dynamic from 'next/dynamic';
...
const Globe = dynamic(import('react-globe.gl'), { ssr: false });

[edwmurph]

makes sense thanks!

[beachstrider]

Thanks for reaching out @edwmurph.

This module is not SSR compatible, mostly because of the inclusion of threejs. To work around this issue in a SSR app I would suggest importing the module dynamically and bypassing the SSR phase.

I'm not familiar enough with Gatsby to provide exact syntax, but in nextjs you can easily do this in this manner: https://nextjs.org/docs#dynamic-import

import dynamic from 'next/dynamic';
...
const Globe = dynamic(import('react-globe.gl'), { ssr: false });

I made a little adjustment as the old version may not compatible with the latest nextjs.

const Globe = dynamic(() => import('react-globe.gl').then((mod) => mod.default), {
  ssr: false
})