chart js + typescript leading to Can't resolve 'react-server-dom-webpack' – Reactjs

Here is my page.tsx file

import Image from 'next/image'
import styles from './page.module.css'
import React, { forwardRef } from 'react';
import { useRouter } from 'next/router'

import {Line} from 'react-chartjs-2';
import { ChartData } from 'chart.js';



export default function Home() {
  const data: ChartData<'line', number[], string> = {
    labels: ['0.5', '1', '1.5', '2', '2.5', '3', '3.5'],
    datasets: [
      {
        label: 'My First dataset',
        fill: false,
        backgroundColor: 'rgba(75,192,192,0.4)',
        borderColor: 'rgba(75,192,192,1)',
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: 'rgba(75,192,192,1)',
        pointBackgroundColor: '#fff',
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: 'rgba(75,192,192,1)',
        pointHoverBorderColor: 'rgba(220,220,220,1)',
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: [65, 59, 80, 81, 56, 55, 40]
      }
    ]
  };
  function handleFirebase(): number {
    return 1

  }
  return (
    <main className={styles.main}>
   

<nav className="bg-white px-2 sm:px-4 py-2.5 dark:bg-gray-900 fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600">
  <div className="container flex flex-wrap items-center justify-between mx-auto">
  <a href="https://flowbite.com/" className="flex items-center">
      <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Water</span>
  </a>

  <div className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-sticky">
    <ul className="flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
      <li>
      </li>
      <li>
        <a href="#" className="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
      </li>
      <li>
      
      </li>
    </ul>
  </div>
  </div>
</nav>
<div className="flex md:order-2 left-10">
  <div className="relative w-full lg:max-w-sm left-10">
            <select className="w-full p-6 text-gray-500 bg-white border rounded-md shadow-sm outline-none appearance-none focus:border-indigo-600 left-10">
                <option>Home</option>
                <option>Work</option>
                <option>School</option>
                <option>Balls</option>
            </select>
        </div>
  </div>

  <div>
    <h2>Line Example</h2>
    <Line
      data={data}
      width={400}
      height={400}
    />
  </div>
    </main>
  )
}

Here is my ./node_modules/react-chartjs-2/dist/index.js

import { Chart as Chart$1, LineController, BarController, RadarController, DoughnutController, PolarAreaController, BubbleController, PieController, ScatterController } from 'chart.js';

// Import `useClient` from `react-server-dom-webpack`

const defaultDatasetIdKey = "label";

function reforwardRef(ref, value) {
  if (typeof ref === "function") {
    ref(value);
  } else if (ref) {
    ref.current = value;
  }
}

function setOptions(chart, nextOptions) {
  const options = chart.options;
  if (options && nextOptions) {
    Object.assign(options, nextOptions);
  }
}

function setLabels(currentData, nextLabels) {
  currentData.labels = nextLabels;
}

function setDatasets(currentData, nextDatasets, datasetIdKey = defaultDatasetIdKey) {
  const addedDatasets = [];
  currentData.datasets = nextDatasets.map((nextDataset) => {
    // given the new set, find it's current match
    const currentDataset = currentData.datasets.find((dataset) => dataset[datasetIdKey] === nextDataset[datasetIdKey]);
    // There is no original to update, so simply add new one
    if (!currentDataset || !nextDataset.data || addedDatasets.includes(currentDataset)) {
      return {
        ...nextDataset
      };
    }
    addedDatasets.push(currentDataset);
    Object.assign(currentDataset, nextDataset);
    return currentDataset;
  });
}

function cloneData(data, datasetIdKey = defaultDatasetIdKey) {
  const nextData = {
    labels: [],
    datasets: []
  };
  setLabels(nextData, data.labels);
  setDatasets(nextData, data.datasets, datasetIdKey);
  return nextData;
}

/**
 * Get dataset from mouse click event
 * @param chart - Chart.js instance
 * @param event - Mouse click event
 * @returns Dataset
 */
function getDatasetAtEvent(chart, event) {
  return chart.getElementsAtEventForMode(event.nativeEvent, "dataset", {
    intersect: true
  }, false);
}
/**
 * Get single dataset element from mouse click event
 * @param chart - Chart.js instance
 * @param event - Mouse click event
 * @returns Dataset
 */ function getElementAtEvent(chart, event) {
    return chart.getElementsAtEventForMode(event.nativeEvent, "nearest", {
        intersect: true
    }, false);
}
/**
 * Get all dataset elements from mouse click event
 * @param chart - Chart.js instance
 * @param event - Mouse click event
 * @returns Dataset
 */ function getElementsAtEvent(chart, event) {
    return chart.getElementsAtEventForMode(event.nativeEvent, "index", {
        intersect: true
    }, false);
}

function ChartComponent(props, ref) {
    const { height =150 , width =300 , redraw =false , datasetIdKey , type , data , options , plugins =[] , fallbackContent , updateMode , ...canvasProps } = props;
    const canvasRef = useRef(null);
    const chartRef = useRef();
    const renderChart = ()=>{
        if (!canvasRef.current) return;
        chartRef.current = new Chart$1(canvasRef.current, {
            type,
            data: cloneData(data, datasetIdKey),
            options: options && {
                ...options
            },
            plugins
        });
        reforwardRef(ref, chartRef.current);
    };
    const destroyChart = ()=>{
        reforwardRef(ref, null);
        if (chartRef.current) {
            chartRef.current.destroy();
            chartRef.current = null;
        }
    };
    useEffect(()=>{
        if (!redraw && chartRef.current && options) {
            setOptions(chartRef.current, options);
        }
    }, [
        redraw,
        options
    ]);
    useEffect(()=>{
        if (!redraw && chartRef.current) {
            setLabels(chartRef.current.config.data, data.labels);
        }
    }, [
        redraw,
        data.labels
    ]);
    useEffect(()=>{
        if (!redraw && chartRef.current && data.datasets) {
            setDatasets(chartRef.current.config.data, data.datasets, datasetIdKey);
        }
    }, [
        redraw,
        data.datasets
    ]);
    useEffect(()=>{
        if (!chartRef.current) return;
        if (redraw) {
            destroyChart();
            setTimeout(renderChart);
        } else {
            chartRef.current.update(updateMode);
        }
    }, [
        redraw,
        options,
        data.labels,
        data.datasets,
        updateMode
    ]);
    useEffect(()=>{
        if (!chartRef.current) return;
        destroyChart();
        setTimeout(renderChart);
    }, [
        type
    ]);
    useEffect(()=>{
        renderChart();
        return ()=>destroyChart();
    }, []);
    return /*#__PURE__*/ React.createElement("canvas", Object.assign({
        ref: canvasRef,
        role: "img",
        height: height,
        width: width
    }, canvasProps), fallbackContent);
}
const Chart = /*#__PURE__*/ forwardRef(ChartComponent);

function createTypedChart(type, registerables) {
    Chart$1.register(registerables);
    return /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ React.createElement(Chart, Object.assign({}, props, {
            ref: ref,
            type: type
        })));
}
const Line = /* #__PURE__ */ createTypedChart("line", LineController);
const Bar = /* #__PURE__ */ createTypedChart("bar", BarController);
const Radar = /* #__PURE__ */ createTypedChart("radar", RadarController);
const Doughnut = /* #__PURE__ */ createTypedChart("doughnut", DoughnutController);
const PolarArea = /* #__PURE__ */ createTypedChart("polarArea", PolarAreaController);
const Bubble = /* #__PURE__ */ createTypedChart("bubble", BubbleController);
const Pie = /* #__PURE__ */ createTypedChart("pie", PieController);
const Scatter = /* #__PURE__ */ createTypedChart("scatter", ScatterController);

export { Bar, Bubble, Chart, Doughnut, Line, Pie, PolarArea, Radar, Scatter, getDatasetAtEvent, getElementAtEvent, getElementsAtEvent };
//# sourceMappingURL=index.js.map

After running npm run dev I get this error
` Failed to compile
./node_modules/react-chartjs-2/dist/index.js:4:0
Module not found: Can’t resolve ‘react-server-dom-webpack’

Import trace for requested module:
./src/app/page.tsx

https://nextjs.org/docs/messages/module-not-found`
Im attempting to make a chart render on my page.tsx file and im not really sure what index.js does so right now im assuming its auto generated by chart.js. Im currently attempting to make a line chart render with the respective data points in the const data