g-loot / react-tournament-brackets

React component library for displaying bracket leaderboards
https://sleepy-kare-d8538d.netlify.app/?path=/story/components-bracket--bracket
GNU Lesser General Public License v2.1
219 stars 69 forks source link

reactjs 17.0.2 #52

Open eliataylor opened 1 year ago

eliataylor commented 1 year ago

getting this error in React 17.0.2, running either elimination component using the readme example data:

Screen Shot 2023-04-06 at 2 04 00 AM

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

const matches = [
    {
        "id": 260005,
        "name": "Semi Final - Match",
        "nextMatchId": 260006,
        "nextLooserMatchId": null,
        "tournamentRoundText": "4",
        "startTime": "2021-05-30",
        "state": "DONE", // 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | 'DONE' | 'SCORE_DONE' Only needed to decide walkovers and if teamNames are TBD (to be decided)
        "participants": [
            {
                "id": "c016cb2a-fdd9-4c40-a81f-0cc6bdf4b9cc", // Unique identifier of any kind
                "resultText": "WON", // Any string works
                "isWinner": false,
                "status": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY' | null
                "name": "giacomo123"
            },
            {
                "id": "9ea9ce1a-4794-4553-856c-9a3620c0531b",
                "resultText": null,
                "isWinner": true,
                "status": null, // 'PLAYED' | 'NO_SHOW' | 'WALK_OVER' | 'NO_PARTY'
                "name": "Ant"
            }
        ]
    }
]

export const BracketsSingleElimination = () => {
    const finalWidth = Math.max(window.innerWidth - 50, 500);
    const finalHeight = Math.max(window.innerHeight - 100, 500);
    return (
        <SingleEliminationBracket
            matches={matches}
            matchComponent={Match}
            svgWrapper={({children, ...props}) => (
                <SVGViewer width={finalWidth} height={finalHeight} {...props}>
                    {children}
                </SVGViewer>
            )}
        />
    );
};
cpwaters commented 7 months ago

Did you get a resolution for this?
Seems like it's looking for .ts and .tsx files when the node_modules install only gives .js files. Have the same problem on React18.2.0 JS/JSX not TS/TSX