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 ?
optimistic-gold
optimistic-goldβ€’456d ago
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.
extended-yellow
extended-yellowβ€’456d ago
Hello @rx7a , as the bot suggested, did you double-check your imports?
evident-indigo
evident-indigoβ€’456d 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
extended-yellow
extended-yellowβ€’456d 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. πŸ™
evident-indigo
evident-indigoβ€’456d 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 πŸ‘
More Posts
Inferencer date inferring is too sensitiveHi πŸ™‚ Another issue I've encountered. I have a number field, that the Inferencer recognizes as a DatuseParams, useResource giving different results in different context.I tried to get the resourceName, actions, params by using one of this hook inside `react-router-v6` Inferencer disregards null-value fieldsHi there πŸ‘‹ So I'm making actual progress using the library with the modifications I've used to the Hi pinksheep 3388 can you give us `npmHi @sheepndreams, can you give us `npm run refine whoami` output for debug ?Inferencer - how to use a diferent identifer idHi, I want to use the Inferencer (MUI) to generate the views for my data. However, my data use theUse fieldTransformerHey😩 guys can some someone send me an example of how I can use fieldTransformer const handleTransfAuth Azure B2C with Next.jsI am trying to implement authentication with azure B2C with next, however in the doc there are some Preview Image on edit page loadHi ! how do in ensure that when I go to my edit page, it shows image on my Upload component ? When Change root background .Hello all first time on using refine and I love it . I’ m actually looking at changing the backgroShare variabel with different components.I have a component with a usestate hook - const [co2TotalSaving, setCo2TotalSaving] = useState(0),Change update patch urlHello !! i try to implement the updating password feature. I wrote the updatePasseword in the auth pcan I make a music player web application using refine in the hackathonCan I make any project in the hackathon using refine or do I need to make any of specified projects Show label changeIs there a way to change label on SHOW component ? I know there is a title option, but I specificallTutorial - Data provider - Axios versionHello, I am testing Refine and just going through the tutorial 3.xx.xx. I'm at the part 3.3 where weRemove Refine logo from the pagethe flower logo on the bottom right of the page, how do I remove that?Refine/Next/Mantine/Supabase - access to register/forgot password page not allowedWhile not logged in, the register/forgot password pages are not accessible. I get the unauthenticate