It looks like you are trying to create a spider web (or radar) chart using Highcharts in a React component. The fact that it did not work, even inside useEffect, suggests there might be some issues with the setup, especially when initializing Highcharts with additional modules like highcharts-more.

Here are steps to address the issue and ensure compatibility with the latest Highcharts version:

Updated Code Example

1. Loading HighchartsMore Properly: The HighchartsMore module should be registered before you create the chart. It's generally a good practice to import and integrate your libraries both in the global context and within component lifecycle methods when you need them.

2. Use Effect Dependencies: Ensure your useEffect has correct dependencies to avoid running it unnecessarily.

3. Check Data Types: Make sure that your data inputs match expected types for Highcharts.

Here's an updated version of your code; I made a few adjustments to ensure it runs correctly:

import React, { useEffect } from 'react';
import Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsReact from 'highcharts-react-official';
import { spiderWeb } from 'feature/analytics/config';

// Define the props for SpiderWeb component
export type SpiderWebProps = {
    data?: Array<Record<string, string | boolean | number | Array<any>>>;
};

// Initialize HighchartsMore only once
HighchartsMore(Highcharts);

// Configure spider web (radar) options
const options = spiderWeb();

export const SpiderWeb: React.FC<SpiderWebProps> = ({ data }: SpiderWebProps) => {
    // If data is provided, use it, otherwise use dummy data
    const dummyData = data || [
        {
            name: 'Category A',
            data: [80, 90, 70, 85, 60],
            pointPlacement: 'on',
        },
        {
            name: 'Category B',
            data: [70, 85, 60, 75, 95],
            pointPlacement: 'on',
        },
    ];

    // Chart options
    const chartOptions = {
        ...options,
        chart: {
            polar: true,
            type: 'line',
        },
        yAxis: {
            visible: false,
        },
        series: dummyData,
    };

    // Render HighchartsReact component
    return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
};

Key Changes

1. Imports: HighchartsMore is now loaded outside of the component, which prevents multiple executions and potential initialization issues.

2. Data Input: If no data is provided, the component now falls back to dummyData.

3. No useEffect: In this case, since we are initializing HighchartsMore outside of the component, the useEffect hook isn't needed.

Additional Tips

• Check Version Compatibility: Make sure you're using a version of highcharts and highcharts-react-official that is compatible with the latest Highcharts features.
• Browser Console: Always check for console errors in the browser, as they can provide insights into what's going wrong.
• Documentation: Refer to Highcharts documentation for updates and examples.

With these changes, your spider web chart should work as expected with the latest Highcharts version.