Refine _ Compiled with problems:
Hi,
While compiling a refine code, I have the next error:
TS2786: 'ReactApexChart' cannot be used as a JSX component.
Its instance type 'ReactApexChart' is not a valid JSX element.
Type 'ReactApexChart' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.
13 | </Stack>
14 |
15 | <ReactApexChart />| ^^^^^^^^^^^^^^ 16 | </Box> 17 | ) 18 | } Could someone help where should I check ?
5 Replies
Hi, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and found an answer! 🏆
Answer: The error is likely caused by an incorrect import of the ReactApexChart component. SOURCES: ./docs/tutorial/1-getting-started/headless/2-create-project.md, ./docs/tutorial/1-getting-started/chakra-ui/2-create-project.md, ./docs/tutorial/1-getting-started/mantine/2-create-project.md, ./docs/tutorial/1-getting-started/mui/2-create-project.md
Answer: The error is likely caused by an incorrect import of the ReactApexChart component. SOURCES: ./docs/tutorial/1-getting-started/headless/2-create-project.md, ./docs/tutorial/1-getting-started/chakra-ui/2-create-project.md, ./docs/tutorial/1-getting-started/mantine/2-create-project.md, ./docs/tutorial/1-getting-started/mui/2-create-project.md
Note: If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.
correct-apricot•2y ago
Hello @rx7a , as the bot suggested, did you double-check your imports?
ambitious-aqua•2y ago
Hello @batuhanw,
Yeaa,
I have this as code:
import ReactApexChart from 'react-apexcharts';
...
import { PieChartProps } from 'interfaces/home';
const PieChart = ({title, value, series, colors}: PieChartProps) => {
return (
<Box>
<Stack direction="column">
<Typography fontSize={14} color='#808191'>{title}</Typography>
<Typography fontSize={24} color='#11142d' fontWeight={700} mt={1}>{value}</Typography>
</Stack>
<ReactApexChart />
</Box>
)
}
export default PieChart
correct-apricot•2y ago
I just tried to reproduce the issue, and the
mern-dashboard-client example is building without any errors, could you double-check your package.json and it's dependencies?
Please make sure you also installed apexcharts lib as well, not just react-apexcharts, if the problem persists, please let us know, ideally with some codesandbox. 🙏ambitious-aqua•2y ago
I believe I burned some steps and I have to start softer 😵💫 . I will come back with this subject, but now I will do some easier tasks.
Thanks for your help @batuhanw 👍