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

Question

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>
About
</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

Answer 1

Below are the possibilities,
Try with downgrade chartjs version to 3.x.x
Install types also like #types/react-server-dom-webpack
Do npm i properly if any of module pending