Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ApexChart cannot be used as a JSX component

See original GitHub issue

Description

The graph is drawn normally, but an error message is output in macOS only

- 'ApexChart' cannot be used as a JSX component.
- Its instance type 'ReactApexChart' is not a valid JSX element.
- The types returned by 'render()' are incompatible between these types.
- Type 'React.ReactNode' is not assignable to type 'import("~/node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode'.
- Type '{}' is not assignable to type 'ReactNode'.

Steps to Reproduce

yarn(npm i) & yarn start (npm run start) in macOS

Expected Behavior

no error

Actual Behavior

drawn normally, but an error message is output

Screenshots

Reproduction Link

https://github.com/wonjin-dev/1coin/tree/master/src

Issue Analytics

State:
Created a year ago
Reactions:3
Comments:7

Top GitHub Comments

2reactions

blingblin-gcommented, Apr 13, 2022

I’ve just solved this problem with // @ts-ignore on the component <ApexChart /> like this below.

        // @ts-ignore
        <ApexChart
          type="line"

I think it has an issue with React v18 and TypeScript in ApexChart. I guess ApexChart is made up with JavaScript and its type doesn’t look like appropriate in React18

2reactions

blingblin-gcommented, Apr 13, 2022

I have same issue, but import path is little bit different.

Type 'React.ReactNode' is not assignable to type 'import("~/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.

full log is below

'ApexChart' cannot be used as a JSX component.
  Its instance type 'ReactApexChart' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("~/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

Top Results From Across the Web

react-apexcharts cannot be used as a JSX component

I got this error when I use react-apexchart in Typescript. Does any one know why this happens?

A React Chart wrapper for ApexCharts.js

React-ApexCharts is a wrapper component for ApexCharts ready to be integrated into your react.js application to create stunning React Charts. In this post,...

Component cannot be used as a JSX component. Its return ...

I'm currently getting the following error on the Todos component inside TodoApp.tsx: 'Todos' cannot be used as a JSX component.

Component cannot be used as a JSX component in React

The error Component cannot be used as a JSX component occurs for multiple reasons, returning an array of JSX elements instead of a...

react-apexcharts - npm

import Chart from 'react-apexcharts'. To create a basic bar chart with minimal configuration, write as follows: class App extends Component ...