chart js + typescript 导致无法解析'react-server-dom-webpack'

问题描述 投票：0回答：2

这是我的 page.tsx 文件

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

这是我的./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

运行 npm run dev 后出现此错误 ` 编译失败 ./node_modules/react-chartjs-2/dist/index.js:4:0 找不到模块：无法解析“react-server-dom-webpack”

请求模块的导入跟踪： ./src/app/page.tsx

https://nextjs.org/docs/messages/module-not-found` 我试图在我的 page.tsx 文件上制作图表，但我不太确定 index.js 现在做了什么，我假设它是由 chart.js 自动生成的。我目前正在尝试使用常量数据中的各个数据点制作折线图渲染

reactjs next.js chart.js web-developer-toolbar
2个回答
0
投票

以下是可能性，

  • 尝试将 chartjs 版本降级到 3.x.x
  • 安装类型也像@types/react-server-dom-webpack
  • 如果有任何模块挂起，请正确执行 npm i
0
投票

我会假设你使用的是相对最新的节点版本和 npm 版本。否则，编辑您的问题并让我们知道您使用的是什么版本以及在哪个操作系统上。

根据我的假设：既然你已经注释掉了这条线：

Import useClient from react-server-dom-webpack

这就是您收到此错误的原因。 npm 找不到你注释掉的这个模块。我建议您执行以下操作：

  1. 删除您的节点模块文件夹，然后再次安装 npm 包
  2. 之后，通过运行重新安装依赖项：
    npm install react-dom react
  3. 运行你的代码
    npm run start
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.