我尝试在Gatsby项目中使用react-chartjs-2。我按照this website编写了第一个测试,看看它是否有效。我的代码是:
import React from "react"
import { Chart, Arclement, Tooltip, Legend } from 'chart.js'
import { Pie } from 'react-chartjs-2'
const data = {
labels: ['Taxation', 'Materials', 'Profit', 'Expenses', 'Wages'],
datasets: [
{
label: 'Tax bill',
data: [25, 20, 8, 12, 34],
},
],
};
const PieChart = () => {
return (
<div style={{ width: '750px' }}>
<Pie data={data} />
</div>
);
};
const Artists = (props) => {
let artistChart = getArtistChart(orderArtists(props.stats));
return (
<div id="statsCard">
<PieChart />
</div>
)
}
我得到以下错误:
Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
at TypedRegistry.isForType (chart.esm.js:4756:1)
at Registry._getRegistryForType (chart.esm.js:4899:1)
at eval (chart.esm.js:4879:1)
at Array.forEach (<anonymous>)
at Registry._each (chart.esm.js:4878:1)
at Registry.add (chart.esm.js:4836:1)
at Chart.value [as register] (chart.esm.js:6169:1)
at eval (webpack-internal:///./src/pages/elements/artists.jsx:17:45)
at ./src/pages/elements/artists.jsx (component---src-pages-index-js.js:62:1)
at options.factory (commons.js:3711:31)
它是由盖茨比内部使用图表的错误方式引起的还是可以按现在的方式修复的?
1条答案
按热度按时间w8biq8rn1#
这看起来像是SSR(Sserver-SideRendering)问题,因此在节点服务器中编译代码时会失败。
我建议使用
React.Suspense
或loadable
components动态地将依赖项直接导入客户端,代码如下所示:或者使用
React.Suspense
:fallback
*另一个替代解决方案是通过在
gatsby-node.js
中添加以下内容来为react-chartjs-2
依赖项添加null
加载程序:在上面的代码片段中,test是一个正则表达式(这就是为什么在斜杠之间,
/
),它应该匹配出错模块的node_modules
中的文件夹名称。