react-tournament-brackets
react-tournament-brackets copied to clipboard
reactjs 17.0.2
getting this error in React 17.0.2, running either elimination component using the readme example data:

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>
)}
/>
);
};
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