search

hoaiduyit / react-pannellum

46 stars 38 forks source link

server side rendering not possible because unescaped use of window #69

Closed AlexanderProd closed 2 years ago

AlexanderProd commented 2 years ago

When I want to build my page with gatsbyjs using this package I get the following error.

 ERROR #95312 

"window" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html

  22 |  */
  23 |
> 24 | window.libpannellum = function (window, document, undefined) {
     | ^
  25 |
  26 |   /**
  27 |   * Creates a new panorama renderer.

  WebpackError: ReferenceError: window is not defined

  - libpannellum.js:24 
    [gatsby-shopify-starter]/[pannellum-react]/es/pannellum/js/libpannellum.js:24:1

This should be fairly easy to fix

hoaiduyit commented 2 years ago

Hello @AlexanderProd thank for spotting this, I'll take a look at it.

hoaiduyit commented 2 years ago

Hello @AlexanderProd I realized you're using gatsby which is from gatsby itself, I tested on my project that running nextjs and it works fine, you can find a solution here. Thanks. https://stackoverflow.com/questions/63381461/webpackerror-referenceerror-window-is-not-defined-on-gatsby

AlexanderProd commented 2 years ago

Hello @AlexanderProd I realized you're using gatsby which is from gatsby itself, I tested on my project that running nextjs and it works fine, you can find a solution here. Thanks. https://stackoverflow.com/questions/63381461/webpackerror-referenceerror-window-is-not-defined-on-gatsby

Thank you, that did fix it but now I'm getting a different error when I try to build with pannellum-react imported in my gatsby project. 

failed Building static HTML for pages - 1.338s

 ERROR #95313 

Building static HTML failed for path "/sanitaer/"

See our docs page for more info on this error: https://gatsby.dev/debug-html

  261 |     if (!bodyHtml) {
  262 |       try {
> 263 |         bodyHtml = renderToString(bodyComponent)
      |                    ^
  264 |       } catch (e) {
  265 |         // ignore @reach/router redirect errors
  266 |         if (!isRedirect(e)) throw e

  WebpackError: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for th
  e full message or use the non-minified dev environment for full errors and additional helpful warnings.

  - static-entry.js:263 
    gatsby-shopify-starter/.cache/static-entry.js:263:20