liferay-amd-loader - Liferay React 应用程序中缺少 React 依赖项错误

Question

我是 Liferay 应用程序的新手，但能够使用 liferay 中的 React Portlet 加载基本数据。当我尝试在 liferay 的 React portlet 中显示 apexcharts/react-apexcharts 时，我开始遇到以下错误。

示例代码在这里：

import React from 'react';
import ReactDOM from 'react-dom';
import Chart from 'react-apexcharts';

class Board extends React.Component {
    constructor() {
        super();
    }

    render() {
        const title = "Servers";

        return (
            <div>
                <div className='status'>{title}</div>
                <div className='board-row'>
                    <p>React Server configuration page</p>
                </div>
            </div>
        );
    }
}

export function xChart(props){
    let state = {
        options: {},
        series: [44, 55, 41, 17, 15],
        labels: ['A', 'B', 'C', 'D', 'E']
      }
    
     return(
        <>
            <Chart options={state.options} series={state.series} type="donut" width="380" />
        </>
     ) 
}

class Dashboard extends React.Component {
    render() {
        return (
            <div className='game'>
                <div className='game-board'>
                    <Board />
                </div>
                <div>
                    <xChart></xChart>
                </div>
            </div>
        );
    }
}

export default function(elementId) {
    ReactDOM.render(<Dashboard />, document.getElementById(elementId));
}

注意：我什至尝试过使用类图表扩展React.Component而不是Chart函数，但仍然存在同样的问题。

以下是 pom.xml 中存在的依赖项

    "dependencies": {
        "apexcharts": "^3.45.2",
        "react": "16.8.6",
        "react-apexcharts": "^1.4.1",
        "react-dom": "16.8.6"
    }

Answer 1

有人解决了吗？我也有同样的问题