React/Recharts having hook issues, but only on specific project

Question

I'm having a strange issue, I have a chart from the recharts library for react that I want to use, but when I have anything other than a basic line and cartesian grid, I get a huge line of errors in the console.

These are the three errors I'm getting, and I'm getting each multiple times

1. Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.

2. Uncaught TypeError: Cannot read properties of null (reading 'useMemo')

3. The above error occurred in the \<Text\> component:

I have tried plugging the same code into a different react project and it works just fine, which prompted me to look at the dependencies/npm list to see if there were any differences and I didnt see any. They have identical 'package.json' files, so I don't think that's the issue. Heres an example of a chart that DOES work:

export function LineGraph(props) {
    return (
        <LineChart width={400} height={400} data={props.data}>
            <Line type="monotone" dataKey="pv" stroke="#EDECE4" />
            <CartesianGrid />
        </LineChart>
    );
}

And heres an example of a chart that DOES NOT work:

export function FunctionGraph(props) {
    return (
        <LineChart width={400} height={400} data={props.data}>
            <Line type="monotone" dataKey="pv" stroke="#EDECE4" />
            <CartesianGrid />
            <XAxis type="number" />
        </LineChart>
    );
}

The example I provided uses the "XAxis" as the difference, but I've observed the same behaivor with the following elements

• Tooltip
• YAxis
• Legend

Any help or ideas would be greatly appreciated.

Answer 1

Matt Morgan's comment fixed it, I deleted node_modules, and package_lock.json and reinstalled all of the npm dependencies. Thanks for the help