"window is undefined" in nextjs

• FYI: going forward this will likely continue to be an issue due to the popularity of nextjs.
• The root cause is that pixi does not work in node.js so it blows up when run in SSR.
• This is related to an old bug with pixi.js v4: https://github.com/pixijs/pixi.js/issues/3224
• The workaround is to use dynamic imports to remove it from the SSR phase. See https://medium.com/frontend-digest/why-is-window-not-defined-in-nextjs-44daf7b4604e
• Unfortunately, this is not an ideal solution.
• The use case is a React component that uses pixi.js under the hood. https://gitlab.com/robotandkid/awesome-react-cutscenes
• Because of the dynamic import, this component is unable to manage it’s SSR lifecycle unless it includes nextjs-specific code.
• But really all that needs to happen is for pixi to abort loading if the window is not present. (Something like wrapping everything in a giant if (typeof window === 'undefined') 😃 )

Expected Behavior

• pixi errors gracefully when the window object is not present

Current Behavior

• pixi cannot run in SSR

Possible Solution

• Something like wrapping everything in a giant if (typeof window === 'undefined') 😃

Steps to Reproduce

Environment

• pixi.js - v5.3.3

• pixi.js version: e.g. 4.7.1

• Browser & Version: e.g. Chrome 67

• OS & Version: e.g. Ubuntu 18.04

• Running Example: url

[bigtimebuddy]

Released v6.3.1, wait a few minutes for it to publish

[daflyinbed]

wrap pixi.js in a component

// pixi.tsx
import { useEffect, useRef } from "react";
import { Application, utils } from "pixi.js";
export default function Pixi() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    if (process.browser) {
      let type = "WebGL";
      if (!utils.isWebGLSupported()) {
        type = "canvas";
      }
      utils.sayHello(type);
    }
  }, []);
  return <canvas ref={canvasRef} />;
}

and them dynamic import that with no ssr

// pages/PixiPage.tsx
import React from "react";
import dynamic from "next/dynamic";
const Pixi = dynamic(() => import("./pixi"), {
  ssr: false,
}); 
export default function PixiPage() {
  return (
      <Pixi/>
  );
}