react-tournament-brackets
react-tournament-brackets copied to clipboard
NextJS e.find is not a function
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.
Try using this newer version of the package instead https://www.npmjs.com/package/react-tournament-brackets it should be fixed there