fair-rose
fair-rose2y ago

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
refine-support-bot
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

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.
wise-white
wise-white2y ago
Hello @rx7a , as the bot suggested, did you double-check your imports?
fair-rose
fair-rose2y 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
wise-white
wise-white2y 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. 🙏
fair-rose
fair-rose2y 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 👍