Currently, I am immersed in a Nextjs project utilizing
and <span class="__cf_email__" data-cfemail="83c0ebe2f1f7ade9f0c3b7adb0adb3">[email protected]</span>
. Although the project compiles successfully, WebStorm throws a type error.<span class="__cf_email__" data-cfemail="b5c7d0d4d6c198d6ddd4c7c1dfc69887f5809b879b85">[email protected]</span>
In this context, here's a Minimal Reproducible Example (MRE) related to Nextjs:
// pages/index.tsx
import { Chart, registerables }
import { Line } from 'react-charts-j2'
const Index () => {
const chart = {
data: {
labels: ['foo', 'bar', 'foobar', 'foobaz']
datasets: [
{
label: 'Foo',
data: [0, 1, 2, 3]
}
]
}
}
return (
<Line data={chart.data} />
)
}
I attempted specifying data and labels types for Line
like this:
<Line<Array<number>, string>
, but that approach failed. The IDE highlights the following error message:
Type {datasets: {data: number[], label: string}[], labels: string[]} is not assignable to type ChartData<"line", TData, TLabel>
https://i.sstatic.net/4CqKO.png
For reference, the working environment details are as follows:
- Nextjs: 13.0.6
- React: 18.2.0
- Node: 18.12.1
- Typescript: ^5.0.4
The question remains, could this issue be stemming from my IDE setup or my code implementation?