fix window references during SSR

RJWadley commented 1 year ago

fixes #432

milkyskies commented 1 year ago

Thank you! I hope this gets merged.

ahmafi commented 1 year ago

I have tried this on a next.js project, but I'll get Cannot read properties of undefined (reading 'shared').

I'm using it like this in a useEffect hook:


  useEffect(() => {
    if (typeof window === 'undefined') return;
    const app = new PIXI.Application({ width: 500, height: 400 });
    containerRef.current.appendChild(app.view);

    // create viewport
    const viewport = new Viewport({
      screenWidth: window.innerWidth,
      screenHeight: window.innerHeight,
      worldWidth: 1000,
      worldHeight: 1000,

      events: app.renderer.events, // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
    });

    // add the viewport to the stage
    app.stage.addChild(viewport);

    // activate plugins
    viewport.drag().pinch().wheel().decelerate();

    // add a red box
    const sprite = viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE));
    sprite.tint = 0xff0000;
    sprite.width = sprite.height = 100;
    sprite.position.set(100, 100);
  }, []);

I have also tested with dynamic import:

  useEffect(() => {
    (async () => {
      if (typeof window === 'undefined') return;

      const pv = await import('pixi-viewport');

      const app = new PIXI.Application({ width: 500, height: 400 });
      containerRef.current.appendChild(app.view);

      // create viewport
      const viewport = new pv.Viewport({
        screenWidth: window.innerWidth,
        screenHeight: window.innerHeight,
        worldWidth: 1000,
        worldHeight: 1000,

        events: app.renderer.events, // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
      });

      // add the viewport to the stage
      app.stage.addChild(viewport);

      // activate plugins
      viewport.drag().pinch().wheel().decelerate();

      // add a red box
      const sprite = viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE));
      sprite.tint = 0xff0000;
      sprite.width = sprite.height = 100;
      sprite.position.set(100, 100);
    })();
  }, []);

What am I missing something?