self is not defined (using react-pixi in a Gatsby project - possible SSR bug)

[mrbjjackson]

Description

Hi @inlet . It's me again sorry to post twice in quick succession.

I've installed react-pixi (using --force as we discussed). However now, when I run gatsby develop I get an error (see below).

I think this error is caused by server-side rendering (i.e. something to do with there not being a window object). Do you think this is the case? I don't suppose you can you suggest a work around? Thanks again.

  10 |
  11 | // Support for IE 9 - 11 which does not include Promises
> 12 | if (!self.Promise) {
     | ^
  13 |     self.Promise = Polyfill;
  14 | }
  15 |


  WebpackError: ReferenceError: self is not defined
  
  - polyfill.js:12 
    [moyo-motivations-gatsby-theme]/[@pixi]/polyfill/dist/esm/polyfill.js:12:1
  
  - bootstrap:18 
    moyo-motivations-gatsby-theme/webpack/bootstrap:18:1
  
  - bootstrap:18 
    moyo-motivations-gatsby-theme/webpack/bootstrap:18:1
  
  - bootstrap:18 
    moyo-motivations-gatsby-theme/webpack/bootstrap:18:1
  
  - module.js:2 
    [moyo-motivations-gatsby-theme]/[@inlet]/react-pixi/module.js:2:3
  
  - bootstrap:18 
    moyo-motivations-gatsby-theme/webpack/bootstrap:18:1
  
  - bootstrap:18 
    moyo-motivations-gatsby-theme/webpack/bootstrap:18:1
  
  - bootstrap:18 
    moyo-motivations-gatsby-theme/webpack/bootstrap:18:1
  
  - gatsby-ssr.js:10 
    moyo-motivations-gatsby-theme/gatsby-ssr.js:10:16
  
  - bootstrap:18 
    moyo-motivations-gatsby-theme/webpack/bootstrap:18:1
  
  - api-runner-ssr.js:19 
    moyo-motivations-gatsby-theme/.cache/api-runner-ssr.js:19:15
  
  - bootstrap:18 
    moyo-motivations-gatsby-theme/webpack/bootstrap:18:1
  

not finished Building development bundle - 6.732s

Steps to reproduce

1. Run gatsby develop on a gatsby project that imports pixi-react elements

Additional info

• @inlet/react-pixi version: 6.3.0
• React version:"^17.0.1",
• ReactDOM version:"^17.0.1",
• PIXI version: "^6.0.0"

[inlet]

Duplicate #233

[inlet]

https://www.gatsbyjs.com/docs/using-client-side-only-packages/

[inlet]

Thanks for the donation 🙏 you rock!