TypeError: Cannot read properties of undefined (reading 'derivers')

[analytics-model]

I encountered a TypeError: Cannot read properties of undefined (reading 'derivers') while running my code. I have confirmed that the pivot.js file exists in our project and that the derivers function is defined. How can I resolve this issue?
The code attached:

import powerbi from "powerbi-visuals-api";
import IVisual = powerbi.extensibility.IVisual;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
// :white_check_mark: Import jQuery first
import * as $ from "../assets/jquery.min.js";
// :white_check_mark: Import jQuery plugins next
import "../assets/jquery-ui.min.js";
// :white_check_mark: Import PivotTable.js **after** jQuery
(window as any).$ = $;
(window as any).jQuery = $;
import "../assets/pivot.min.js";
import "../assets/pivot.min.css";
// :white_check_mark: Import other libraries after PivotTable.js
import "../assets/plotly.min.js";
import "../assets/d3.js";
import "datamaps";
import "c3";
// Log Exceptions Decorator
export function logExceptions(): MethodDecorator {
    return function (target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<any>): TypedPropertyDescriptor<any> {
        return {
            value: function () {
                try {
                    return descriptor.value.apply(this, arguments);
                } catch (e) {
                    const debugArea = this.target.querySelector('#debugLog');
                    debugArea.innerHTML += `<p style="color: red;">Error: ${e}</p>`;
                    console.error(e);
                    throw e;
                }
            }
        }
    }
}
export class Visual implements IVisual {
    private target: HTMLElement;
    private inputElement: HTMLInputElement;
    private dataView: powerbi.DataView;
    // private chart: echarts.ECharts | null = null;
    constructor(options: VisualConstructorOptions) {
        this.target = options.element;
        this.createUI();
    }
    // Applying the logExceptions decorator to the createUI method
    @logExceptions()
    private createUI(): void {
        // Debug Log where Pivot Table will be inserted
        this.target.innerHTML = `
            <div style="padding: 20px; font-family: 'Outfit', sans-serif;">
                <strong>Pivot Table.</strong>
                <div id="debugLog" style="margin-bottom: 8px; font-size: 12px; color: #555;">
                    <strong>Loading Pivot Table...</strong>
                </div>
            </div>`;
        // Pivot utilities
        const derivers = $.pivotUtilities.derivers;
        const renderers = $.extend(
            $.pivotUtilities.renderers,
            $.pivotUtilities.plotly_renderers,
            $.pivotUtilities.d3_renderers,
            $.pivotUtilities.export_renderers
        );
        const data = [
            { color: "blue", shape: "circle" },
            { color: "red", shape: "triangle" },
            { color: "blue", shape: "triangle" },
            { color: "red", shape: "circle" }
        ];
        // Initialize Pivot Table
        $("#debugLog").pivotUI(data, {
            renderers: renderers, // Include custom renderers like Plotly, D3
            cols: ["shape"],      // Columns by shape
            rows: ["color"],      // Rows by color
            rendererName: "Bar Chart", // Set the default renderer to "Bar Chart"
            rendererOptions: {
                // Additional options for the chart can be added here
                chartType: "bar"  // Set default chart type to 'bar'
            }
        });
    }
}