ApexChart cannot be used as a JSX component

[wonjin-dev]

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

1. 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

[OptimusOpus]

I also get this when trying to build via GitHub actions

[wonjin-dev]

Look the error logs, I suspect that there is a conflict with Styled-components. i'd appreciate your advice

[OptimusOpus]

I hadn't committed my yarn.lock, once I added that to GH the build worked fine and I didn't get this message

[blingblin-g]

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'.

[blingblin-g]

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

[raphaeljoer]

I also get this error!

[GusMartins499]

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

This works for me