Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NextJS e.find is not a function #56

Open
DrGreeny opened this issue May 23, 2023 · 1 comment
Open

NextJS e.find is not a function #56

DrGreeny opened this issue May 23, 2023 · 1 comment

Comments

@DrGreeny
Copy link

DrGreeny commented May 23, 2023

Hi, I am using NextJS and updated my component accordingly to fix the window problem, but somehow I am stuck now with the error message "e.find is not a function". This is my code

import matches from "/db/matches.js";
import { useState, useEffect } from "react";

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

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

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

const TournamentWrapper = () => {
  const getWindowSize = () => {
    if (typeof window !== "undefined") {
      return {
        width: window.innerWidth || document.documentElement.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight,
      };
    }
    return { width: 0, height: 0 };
  };

  const [windowSize, setWindowSize] = useState(getWindowSize());

  useEffect(() => {
    const handleResize = () => {
      setWindowSize(getWindowSize());
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  const finalWidth = Math.max(windowSize.width - 50, 500);
  const finalHeight = Math.max(windowSize.height - 100, 500);

  return (
    <div className="bg-black">
      <h1>Tournament Bracket</h1>
      <SingleEliminationBracket
        matches={matches} // Remove the extra curly braces
        matchComponent={Match}
        svgWrapper={({ children, ...props }) => (
          <SVGViewer width={finalWidth} height={finalHeight} {...props}>
            {children}
          </SVGViewer>
        )}
      />
    </div>
  );
};

export default TournamentWrapper;

and I am using the matches.js from here: https://sleepy-kare-d8538d.netlify.app/?path=/story/components-bracket--bracket

It seems it has a problem with the matches array, but I can´t figure out, what the problem actually is.

@Shenato Shenato linked a pull request Nov 28, 2023 that will close this issue
@Shenato
Copy link
Contributor

Shenato commented Jan 14, 2025

Try using this newer version of the package instead https://www.npmjs.com/package/react-tournament-brackets it should be fixed there

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants