[英]Error with Storybook: Can't resolve 'react-chartjs-2'
I am using react-chartjs-2 in my next.js project and it works well when running the project.我在我的next.js项目中使用react-chartjs-2 ,它在运行项目时运行良好。 However, when I try to run Storybook , I get this error:
但是,当我尝试运行Storybook时,出现此错误:
ERROR in ./components/common/Chart/Chart.tsx
Module not found: Error: Can't resolve 'react-chartjs-2' in '/project/components/common/Chart'
@ ./components/common/Chart/Chart.tsx 7:0-38 25:32-35
@ ./components/common/Chart/index.ts
@ ./components/common/index.ts
@ ./common/theme/stories/Colors.stories.tsx
@ ./common/theme/stories sync nonrecursive ^\.[\\/](?:(?!\.)(?=.)[^/]*?\.stories\.tsx)$
ERROR in ./node_modules/chart.js/dist/chart.js 561:17
Module parse failed: Unexpected token (561:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| };
| class DatasetController {
> static defaults = {};
| static datasetElementType = null;
| static dataElementType = null;
@ ./components/common/Chart/Chart.tsx 8:0-73 10:0-5 10:15-28 10:30-41 10:43-53
@ ./components/common/Chart/index.ts
@ ./components/common/index.ts
@ ./common/theme/stories/Colors.stories.tsx
@ ./common/theme/stories sync nonrecursive ^\.[\\/](?:(?!\.)(?=.)[^/]*?\.stories\.tsx)$
@ ./generated-stories-entry.js
This is the Chart component.这是图表组件。
import { Box } from '@components';
import { Bar } from 'react-chartjs-2';
import {
Chart, CategoryScale, LinearScale, BarElement,
} from 'chart.js';
Chart.register(CategoryScale, LinearScale, BarElement);
const labels = ['1', '2', '3', '4', '5', '6'];
const data = {
labels,
datasets: [...],
borderWidth: 1,
}],
};
const ChartContainer = () => (
<Box>
<Bar
data={data}
options={{
maintainAspectRatio: false,
}}
/>
</Box>
);
export default ChartContainer;
In my package.json, I have在我的 package.json 中,我有
Why is it giving me this error?为什么会给我这个错误?
I had this issue as well.我也有这个问题。 I resolved it by updating storybooks
main.js
file.我通过更新故事书
main.js
文件解决了这个问题。 Under the WebpackFinal
I added a alias for react-chartjs-2
that looks like this在
WebpackFinal
下,我为react-chartjs-2
添加了一个别名,看起来像这样
// project/.storybook/main.js
'react-chartjs-2': path.resolve(__dirname, '../node_modules/react-chartjs-2/dist/index.js')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.