How to use the highcharts/highcharts-more function in highcharts

/**
* @file highcharts component
* @author mohaiyan
*/

import React, {Component, PropTypes} from 'react';
import Highcharts from 'highcharts/highstock';
import {NoDataToDisplay} from 'react-highcharts-no-data-to-display';
import highchartsMore from 'highcharts/highcharts-more';
import eventProxy from '../../tools/eventProxy';

highchartsMore(Highcharts);
let ReactHighcharts = require('react-highcharts/ReactHighstock');
NoDataToDisplay(ReactHighcharts.Highcharts);


// import HighchartsMore from 'highcharts/highcharts-more';
// var RHighcharts = require('react-highcharts/ReactHighstock');
// HighchartsMore(RHighcharts.Highcharts);

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

export default class Chart extends Component {
    constructor(props) {

import React from 'react';
import Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more'; //necessary for 'arearange' series type
import HighchartsReact from 'highcharts-react-official';

HighchartsMore(Highcharts);

//TODO:DM - how to better encapsulate this in a react friendly way?
(function(H) {
  H.Pointer.prototype.reset = function() {
    return undefined;
  };

  /**
   * Highlight a point by showing tooltip, setting hover state and draw crosshair
   */
  H.Point.prototype.highlight = function(event) {
    event = this.series.chart.pointer.normalize(event);
    this.onMouseOver(); // Show the hover marker
    //this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
  };

/* global CONFIG */
import React from 'react';
import Highcharts from 'highcharts/highcharts';
import HighchartsMore from 'highcharts/highcharts-more';
import ReactHighcharts from 'react-highcharts';

import parseISO from 'date-fns/parseISO';
import format from 'date-fns/format';
import startOfYesterday from 'date-fns/startOfYesterday';
import subYears from 'date-fns/subYears';

const Chart = ReactHighcharts.withHighcharts(Highcharts);
HighchartsMore(Chart.Highcharts);

class StatsChart extends React.Component {
  constructor(props) {
    super(props);

    this.state = { metrics: [] };
  }

  async componentDidMount() {
    const to_date = format(startOfYesterday(), `yyyy-MM-dd`); // Yesterday
    const from_date = format(subYears(new Date(), 1), `yyyy-MM-dd`); // Stats for 1 year

    const url = `${CONFIG.api.root}/v2/stats?data=${this.props.type}&start_date=${from_date}&end_date=${to_date}`;
    const metrics = [];

    try {

import React, {useEffect, useState} from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import axios from 'axios';
import HighchartsMore from "highcharts/highcharts-more";

HighchartsMore(Highcharts);

const PlayerStatsGraph = props => {
    const options = {
        navigation: {
            buttonOptions: {
              enabled: false
            }
        },
        credits: {
            enabled: false
        },
        chart: {
            polar: true,
            type: 'line',
        },
        title: {

import 'echarts/lib/chart/pie'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/legend/ScrollableLegendModel.js'
import 'echarts/lib/component/legend/ScrollableLegendView.js'
import 'echarts/lib/component/legend/scrollableLegendAction.js'
import {cloneDeep} from "lodash";

import Highcharts from 'highcharts/highcharts';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Exporting from 'highcharts/modules/exporting';

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Exporting(Highcharts);


export class RingPieReact extends React.Component {

  constructor(props) {
    super(props)
    let id = ('_' + Math.random()).replace('.', '_');
    this.state = {
      pieId: 'ringPie' + id
    }
  }

  initPie(id) {

import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/chart/bar'
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Exporting from 'highcharts/modules/exporting';
import Variabled from 'highcharts/modules/variable-pie.js';
import isMobile from './../../utils/isMobile';

import {cloneDeep} from "lodash";

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Exporting(Highcharts);
Variabled(Highcharts)

export class SupplyAreaHighChart extends React.Component {

    constructor(props) {
        super(props)
        this.myChart = null;
        let id = ('_' + Math.random()).replace('.', '_');
        this.state = {
            areaId: 'areaBtt' + id
        }
    }
    initArea(id) {