react-apexcharts 不能用作 JSX 组件

Question

当我在 Typescript 中使用 React-apexchart 时出现此错误。有谁知道为什么会发生这种情况？

/Users/apple/Downloads/stake-governance/src/components/chart/AreaChart.tsx
    TypeScript error in /Users/apple/chartapp/src/components/chart/AreaChart.tsx(113,10):
    'ReactApexChart' 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("/Users/apple/Downloads/stake-governance/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.
              Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props  TS2786
    
        111 |     <div className={cx('area-chart')}>
        112 |       <div id="chart" style={{ height: 480 }}>
      > 113 |         <ReactApexChart 
            |          ^
        114 |           options={option} 
        115 |           series={series} 
        116 |           width="100%"

Answer 1

您是否尝试过添加"allowSyntheticDefaultImports": true,到您的tsconfg.json？我遇到了同样的错误，并通过添加此配置来修复。

{
    "compilerOptions": {
        ...
        "allowSyntheticDefaultImports": true,
        ...
    },
    ...
}