farminf / pannellum-react

React Component for Pannellum (open source panorama viewer for the web)
MIT License
112 stars 81 forks source link

Error importing into gatsby #105

Open tractorcow opened 2 years ago

tractorcow commented 2 years ago

When embedding this component into gatsby, we have an error on window definition.

https://github.com/farminf/pannellum-react/blob/master/src/pannellum/js/libpannellum.js#L24

This triggers the below

WebpackError: ReferenceError: window is not defined

As we only render the component on client side, it's not necessary that we actually render on the serverside, only that the module itself doesn't crash compilation.

We can probably work around by using a conditional import on the panellum-react module, but ideally the window.libpannellum assignment would be wrapped in an if (typeof window !== 'undefined')

tractorcow commented 2 years ago

FYI this is my temporary workaround.

import type { PannellumVideo as PannellumVideoType } from "pannellum-react/lib/index"
let PannellumVideo: typeof PannellumVideoType
if (typeof window === "undefined") {
  PannellumVideo = () => <div />
} else {
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  const imported = require("pannellum-react")
  PannellumVideo = imported.PannellumVideo
}

export { PannellumVideo }