support for builds with server-side rendering

[catdad]

When using SSR (for example, with something like Razzle), window cannot be assumed as an existing global, because it does not exist at the time of the build (the code has to be evaluated on the server), so such uses need to reserved for function execution.

/mnt/d/Git/test/confetti-razzle/node_modules/canvas-confetti/src/confetti.js:370
}());
 ^
ReferenceError: window is not defined
    at /mnt/d/Git/test/confetti-razzle/node_modules/canvas-confetti/src/confetti.js:4:5
    at /mnt/d/Git/test/confetti-razzle/node_modules/canvas-confetti/src/confetti.js:31:4
    at Object.<anonymous> (/mnt/d/Git/test/confetti-razzle/node_modules/canvas-confetti/src/confetti.js:370:2)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.canvas-confetti (/mnt/d/Git/test/confetti-razzle/external "canvas-confetti":1:1)

[catdad]

Note: if confetti is used somewhere within the render path (i.e. in the render() method or directly inside a function component), you will still need to check for window, perhaps like this:

if (typeof window !== 'undefined') {
  confetti();
}

Using it in hooks or elsewhere in the lifecycle that is not triggered by SSR will work just fine without any extra checks.

[catdad]

Published in 0.5.0

[LukeSchlangen]

Thanks for building this @catdad! I think the kids in my coding tournaments are going to love this celebration of their achievements! I'm having a little trouble with SSR.

Using 1.3.2 and trying gatsby build, I get:

failed Building static HTML for pages - 0.282s

 ERROR #95313 

Building static HTML failed

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


   5 | (function main(global, module, isWorker, workerSize) {
   6 |   var canUseWorker = !!(
>  7 |     global.Worker &&
     | ^
   8 |     global.Blob &&
   9 |     global.Promise &&
  10 |     global.OffscreenCanvas &&


  WebpackError: TypeError: Cannot read property 'Worker' of undefined
  
  - confetti.module.mjs:7 
    node_modules/canvas-confetti/dist/confetti.module.mjs:7:1
  
  - confetti.module.mjs:577 
    node_modules/canvas-confetti/dist/confetti.module.mjs:577:2
  
  - celebration-button.js:1 
    src/components/celebration-button.js:1:1
  
  - board.js:1 
    src/components/board.js:1:1
  
  - protected-section.js:1 
    src/components/protected-section.js:1:1
  
  - home.js:1 
    src/pages/tournament/home.js:1:1

My code is wrapped as suggested (which I also feel should work)

  if (typeof window !== 'undefined') {
    const colors = ['#011353', '#ffffff'];
    confetti({
      particleCount: 100,
      angle: 60,
      spread: 55,
      origin: { x: 0 },
      colors,
    });
    confetti({
      particleCount: 100,
      angle: 120,
      spread: 55,
      origin: { x: 1 },
      colors,
    });
  }

But it seems to be failing on the import (even when I comment out the lines, it fails). I'm wondering if that's because the function is immediately invoked?

(function main(global, module, isWorker, workerSize) {
  var canUseWorker = !!(
    global.Worker &&
    global.Blob &&
    global.Promise &&
    global.OffscreenCanvas &&
    global.OffscreenCanvasRenderingContext2D &&
    global.HTMLCanvasElement &&
    global.HTMLCanvasElement.prototype.transferControlToOffscreen &&
    global.URL &&
    global.URL.createObjectURL);

  
})()

Any recommendations?

[catdad]

This was definitely my fault. Thanks for catching this issue! I just published 1.3.3 that should work now (it worked for me in the gatsby starter app).

[LukeSchlangen]

I think that did it! It built! Thank you!

[lorensr]

Updating from 0.0.3 to 1.4.0 fixed this for me 😆. Thank you!