[Solved] Telerik Reporting - Web Designer

[Justin]

I'm hitting a call stack error when running the telerik Web designer in my app, put a few checks to ensure no double init but anyhow here's my init. No backend failures identified. The errors stem from the designer initializing all the controls (dropdowns, fields etc) at this point in the designers internal code.

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at init.wrap (webReportDesigner.kendo-19.3.25.1111.min.js:16:433731)
    at webReportDesigner.kendo-19.3.25.1111.min.js:16:432594
    at Array.forEach (<anonymous>)

export const ReportDesigner = (): React.ReactElement => {
    const initializedRef = React.useRef(false)
    useEffect(() => {
        if (initializedRef.current) return
        // Make jQuery global for legacy scripts
        //@ts-expect-error: TS2339 (TS) Property '$' does not exist on type 'Window & typeof globalThis'.
        window.$ = window.$ || $
        //@ts-expect-error: TS2339 (TS) Property 'jQuery' does not exist on type 'Window & typeof globalThis'.
        window.jQuery = window.jQuery || $
        // Ensure Kendo exists globally
        const kendo = window.kendo
        if (!kendo) {
            console.error("Kendo UI must be loaded globally before initializing the designer!")
            return
        }
        
        const initDesigner = () => {
            if ($("#reportDesigner").data("telerik_WebReportDesigner")) {
                return // already initialized
            }
            //@ts-expect-error: TS2339 because Property 'telerik_WebReportDesigner' does not exist on type 'JQuery<HTMLElement>'.
            ($("#reportDesigner")).telerik_WebReportDesigner({
                serviceUrl: "/api/ReportDesigner",
            })
        }
        // Load Telerik designer scripts sequentially
        const loadDesignerScripts = (): Promise<void> => {
            return new Promise((resolve, reject) => {
                if (document.querySelector('script[src*="webReportDesigner-19.3"]')) {
                    resolve()
                    return
                }
                const coreScript = document.createElement("script")
                coreScript.src = "/telerik/webReportDesigner-19.3.25.1111.js"
                coreScript.onload = () => {
                    const kendoScript = document.createElement("script")
                    kendoScript.src = "/telerik/webReportDesigner.kendo-19.3.25.1111.min.js"
                    kendoScript.onload = () => {
                        // Plugin should now exist
                        //@ts-expect-error: TS2339 (TS) Property 'telerik_WebReportDesigner' does not exist on type 'JQuery<HTMLElement>'.
                        if (!$.fn.telerik_WebReportDesigner) {
                            console.error("Telerik Web Report Designer plugin not loaded!")
                            reject(new Error("Telerik plugin not loaded"))
                            return
                        }
                        resolve()
                    }
                    kendoScript.onerror = (error) => reject(new Error(`Failed to load kendo integration script ${error}`))
                    document.body.appendChild(kendoScript)
                }
                coreScript.onerror = (error) => reject(new Error(`Failed to load core designer script ${error}`))
                document.body.appendChild(coreScript)
            })
        }
        // Ensure scripts loaded + token ready
        loadDesignerScripts().then(() => initDesigner()).catch(err => console.error(err))
    }, [])

    return <div id="reportDesigner" style={{ height: "900px" }} />
}

 

[Petar]

Hi Justin,

Thank you very much for providing the code snippet of the web report designer.

After reviewing it, I noticed something important about the way the scripts are loaded. In your current setup, `webReportDesigner-19.3.25.1111.js` is loaded first, and only afterward `webReportDesigner.kendo-19.3.25.1111.min.js`:

export const ReportDesigner = (): React.ReactElement => {
    const initializedRef = React.useRef(false)
    useEffect(() => {
        if (initializedRef.current) return
        // Make jQuery global for legacy scripts
        //@ts-expect-error: TS2339 (TS) Property '$' does not exist on type 'Window & typeof globalThis'.
        window.$ = window.$ || $
        //@ts-expect-error: TS2339 (TS) Property 'jQuery' does not exist on type 'Window & typeof globalThis'.
        window.jQuery = window.jQuery || $
        // Ensure Kendo exists globally
        const kendo = window.kendo
        if (!kendo) {
            console.error("Kendo UI must be loaded globally before initializing the designer!")
            return
        }
        
        const initDesigner = () => {
            if ($("#reportDesigner").data("telerik_WebReportDesigner")) {
                return // already initialized
            }
            //@ts-expect-error: TS2339 because Property 'telerik_WebReportDesigner' does not exist on type 'JQuery<HTMLElement>'.
            ($("#reportDesigner")).telerik_WebReportDesigner({
                serviceUrl: "/api/ReportDesigner",
            })
        }
        // Load Telerik designer scripts sequentially
        const loadDesignerScripts = (): Promise<void> => {
            return new Promise((resolve, reject) => {
                if (document.querySelector('script[src*="webReportDesigner-19.3"]')) {
                    resolve()
                    return
                }
                const coreScript = document.createElement("script")
                coreScript.src = "/telerik/webReportDesigner-19.3.25.1111.js"
                coreScript.onload = () => {
                    const kendoScript = document.createElement("script")
                    kendoScript.src = "/telerik/webReportDesigner.kendo-19.3.25.1111.min.js"
                    kendoScript.onload = () => {
                        // Plugin should now exist
                        //@ts-expect-error: TS2339 (TS) Property 'telerik_WebReportDesigner' does not exist on type 'JQuery<HTMLElement>'.
                        if (!$.fn.telerik_WebReportDesigner) {
                            console.error("Telerik Web Report Designer plugin not loaded!")
                            reject(new Error("Telerik plugin not loaded"))
                            return
                        }
                        resolve()
                    }
                    kendoScript.onerror = (error) => reject(new Error(`Failed to load kendo integration script ${error}`))
                    document.body.appendChild(kendoScript)
                }
                coreScript.onerror = (error) => reject(new Error(`Failed to load core designer script ${error}`))
                document.body.appendChild(coreScript)
            })
        }
        // Ensure scripts loaded + token ready
        loadDesignerScripts().then(() => initDesigner()).catch(err => console.error(err))
    }, [])

    return <div id="reportDesigner" style={{ height: "900px" }} />
}

However, `webReportDesigner.kendo-19.3.25.1111.min.js` contains the Kendo UI for jQuery components that the main `webReportDesigner-19.3.25.1111.js` script depends on. Because of that, the expected order is the reverse: the Kendo integration script should normally be loaded first.

What is interesting in your case is that loading them in the “wrong” order does not trigger the typical missing‑kendo errors. Instead, you are getting a “Maximum call stack size exceeded” message, which suggests that Kendo UI for jQuery is already being loaded elsewhere—likely in a shared entry point such as `index.html`. You also mentioned that your application uses other Kendo jQuery controls, so it is quite possible that a script like:

https://kendo.cdn.telerik.com/2025.4.1321/mjs/kendo.all.js

is already included globally. Could you please confirm if this is the case?

If it is, then the issue is likely caused by the duplicate loading of Kendo UI for jQuery components. The script `webReportDesigner.kendo-19.3.25.1111.min.js` only contains a subset of Kendo components required by the designer, but when the full Kendo bundle is already present, both sets overlap, and this duplication can lead to the “Maximum call stack size exceeded” error you observed.

In fact, I tested this with duplicate scripts like these, and I was able to reproduce the same error message:

    <script src="https://reporting.cdn.telerik.com/19.1.25.521/js/webReportDesigner.kendo.min.js"></script>
    <script src="/api/reportdesigner/resources/js/telerikReportViewer/"></script>
    <script src="/api/reportdesigner/designerresources/js/webReportDesigner/"></script>
    <script src="https://reporting.cdn.telerik.com/19.1.25.521/js/webReportDesigner.kendo.min.js"></script>

If that is the case for you, the simplest solution would be to remove the `webReportDesigner.kendo-19.3.25.1111.min.js` script from the page where the designer is loaded and rely on the already‑loaded Kendo script.

Could you please try this suggestion and let me know if the issue gets resolved?

If you need further help, capturing a HAR file from the Web Report Designer page would be extremely useful. For detailed instructions, please check Capture your HTTP network session (generate a HAR file). If you prefer not to share sensitive information publicly (which is completely understandable), you can always open a private support ticket through our Support Center: https://www.telerik.com/account/support-center/contact-us/technical-support. In fact, I recommend doing so by default in the future, as response time for support tickets is typically less than 24 hours. 

Thank you again, and I look forward to hearing how it goes!

Regards,
Petar
Progress Telerik