我试图在Next.js项目中添加一个可变半径饼图。我已经下载了Highcharts和Highcharts React Wrapper的最新版本，并导入了它们：

import styles from '../../src/styles/VariableRadiusPie.module.css'
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';
import variablePie from 'highcharts/modules/variable-pie';

variablePie(Highcharts);

下面是我试图渲染的组件：

const RadiusPie = ( { prop } ) => {

const options = {
    chart: {
      type: 'variablepie'
    },
    title: {
      text: 'Variable Radius Pie Chart'
    },
    series: [{
      name: 'Sales',
      data: [{
        name: 'Product A',
        y: 45,
        z: 10
      }, {
        name: 'Product B',
        y: 25,
        z: 5
      }, {
        name: 'Product C',
        y: 20,
        z: 15
      }, {
        name: 'Product D',
        y: 10,
        z: 20
      }]
    }]
  };

return (
    <>
        <div className={styles.RadiusPieParent}>
            <div className={styles.RadiusTitle}>
                <div className={styles}>
                    <p>Revenue By Geographical Location</p>
                </div>
            </div>
            <div className={styles.RadiusPie}>
                <HighchartsReact highcharts={Highcharts} options={options} constructorType={''} />
            </div>
        </div>
    </>
  )
 }

export default RadiusPie;

不幸的是，我遇到了错误
TypeError：无法读取未定义的属性（阅读“Core/Series/SeriesRegistry.js”）
我相信错误源于这一行代码：

variablePie(Highcharts);

但删除这一行后，我出现了错误：
错误：Highcharts错误#17：www.highcharts.com/errors/17/?missingModuleFor=variablepie
我不知道如何摆脱这个错误，任何帮助将不胜感激。