NextJs Compatibility?

[saturn118]

Hey, has anybody managed to get this working with nextjs? When I insert the import line below it causes a window not found error, there is no other code in the project.

import {
  SingleEliminationBracket,
  DoubleEliminationBracket,
  Match,
  MATCH_STATES,
  SVGViewer
} from "@g-loot/react-tournament-brackets";

'window is not defined'
/@g-loot/react-tournament-brackets/dist/bundle.js (1:390)

importing the individual elements via nextjs' dynamic client side imports also doesn't seem to work either

 const DoubleEliminationBracket = dynamic(
   () => {
     return import("@g-loot/react-tournament-brackets").then(
       mod => mod.DoubleEliminationBracket
     );
   },
  { ssr: false }
);

[Jeidnx]

This is a common Issue when using NextJS. When the next server tries to render your page it doesn't have a window.

The solution is to create solid checking if the window object is defined.

Either someone adapts this package to do these checks (you could implement them and make a pull request) or you do it inside your project. I am not very familiar with this specific package, but if you use next dynamic import and wrap every usage in a window check you should be fine. A very lazy, but functional, approach is to just skip rendering the page if the window object is undefined.

[saturn118]

Thanks. I managed to get it working that way after a few attempts. Pasted the headers below for reference if anybody needs it

import dynamic from "next/dynamic";
import React from "react";

if (typeof window !== "undefined" && typeof window.navigator !== "undefined") {
  import("@g-loot/react-tournament-brackets");
}
const SingleEliminationBracket = dynamic(
  () => {
    return import("@g-loot/react-tournament-brackets").then(
      mod => mod.SingleEliminationBracket
    );
  },
  { ssr: false }
);

const Match = dynamic(
  () => {
    return import("@g-loot/react-tournament-brackets").then(mod => mod.Match);
  },
  { ssr: false }
);
const MATCH_STATES = dynamic(
  () => {
    return import("@g-loot/react-tournament-brackets").then(
      mod => mod.MATCH_STATES
    );
  },
  { ssr: false }
);
const SVGViewer = dynamic(
  () => {
    return import("@g-loot/react-tournament-brackets").then(
      mod => mod.SVGViewer
    );
  },
  { ssr: false }
);

const createTheme = dynamic(
  () => {
    return import("@g-loot/react-tournament-brackets").then(
      mod => mod.createTheme
    );
  },
  { ssr: false }
);

[Shenato]

Please let me know if this change fixes it https://github.com/g-loot/react-tournament-brackets/pull/64

You can easily test it by npm installing this beta release https://www.npmjs.com/package/@g-loot/react-tournament-brackets/v/1.0.31-rc