Unhandled exception rendering component: Blockly is not defined

[russell.pooley]

I have a Blazor WASM page which has the following contents:

Code: Select all

@page "/Administration/Reports/Designer/{Id?}"
@using Stimulsoft.Report.Blazor;
@using Stimulsoft.Report
@attribute [Authorize]
@inject IJSRuntime jsRuntime

<div class="content full-height" style="overflow-y: hidden;">
    <StiBlazorDesigner Report="@report"></StiBlazorDesigner>
</div>

@code {
    [Parameter]
    public string? Id { get; set; }

    StiReport report;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        Stimulsoft.Base.StiLicense.Key = "our license key";

        report = new StiReport();
    }
}

When we attempt to access the page in the browser we receive the following in the console and the designer fails to render and all we see is the spinner in the center (sti-component-loader):

Code: Select all

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Blockly is not defined
      ReferenceError: Blockly is not defined
          at eval (eval at window.evalWasm (eval at <anonymous> (https://localhost:5001/_framework/blazor.webassembly.js:1:3332)), <anonymous>:24610:1)
          at eval (<anonymous>)
          at window.evalWasm (eval at <anonymous> (https://localhost:5001/_framework/blazor.webassembly.js:1:3332), <anonymous>:76:12)
          at Object.St [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:60156)
          at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.6.0.26.vxgg1h4bf1.js:10650:37)
          at wasm://wasm/0217faa2:wasm-function[14797]:0x512d15
          at wasm://wasm/0217faa2:wasm-function[14757]:0x511f0f
          at wasm://wasm/0217faa2:wasm-function[14697]:0x503ea8
          at wasm://wasm/0217faa2:wasm-function[14696]:0x502d5b
          at wasm://wasm/0217faa2:wasm-function[29342]:0x6df31a
Microsoft.JSInterop.JSException: Blockly is not defined
ReferenceError: Blockly is not defined
    at eval (eval at window.evalWasm (eval at <anonymous> (https://localhost:5001/_framework/blazor.webassembly.js:1:3332)), <anonymous>:24610:1)
    at eval (<anonymous>)
    at window.evalWasm (eval at <anonymous> (https://localhost:5001/_framework/blazor.webassembly.js:1:3332), <anonymous>:76:12)
    at Object.St [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:60156)
    at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.6.0.26.vxgg1h4bf1.js:10650:37)
    at wasm://wasm/0217faa2:wasm-function[14797]:0x512d15
    at wasm://wasm/0217faa2:wasm-function[14757]:0x511f0f
    at wasm://wasm/0217faa2:wasm-function[14697]:0x503ea8
    at wasm://wasm/0217faa2:wasm-function[14696]:0x502d5b
    at wasm://wasm/0217faa2:wasm-function[29342]:0x6df31a
   at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[String,Object,Object,String](String identifier, String arg0, Object arg1, Object arg2, Int64 targetInstanceId)
   at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[String,String](String identifier, String arg0)
   at Stimulsoft.Report.Blazor.StiBlazorDesigner.JSInvokeAsync(String identifier, Object[] args)
   at Stimulsoft.Report.Blazor.StiBlazorDesigner.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Do you have any tips on how we can resolve the issue, FYI we are using version 2024.1.4

[russell.pooley]

I think this might be something to do with a third party component - BlazorMonacoYaml that we are using.
I will update if it continues to be an issue.

[russell.pooley]

We have included the BlazorMonacoYaml and BlazorMonaco packages to our Blazor project which requires the following js files to be included in the index.html before the blazor.webassembly.js file.
This is what causes the Blockly issue to appear.

<!--BlazorMonaco-->
<!--BlazorMonaco Yaml-->
<script src="_content/BlazorMonacoYaml/lib/monaco-editor-yaml/min/vs/loader.js"></script>
<script>require.config({ paths: { 'vs': '_content/BlazorMonacoYaml/lib/monaco-editor-yaml/min/vs' } });</script>
<script src="_content/BlazorMonacoYaml/lib/monaco-editor-yaml/min/vs/editor/editor.main.js"></script>
<!--/BlazorMonaco Yaml-->
<script src="_content/BlazorMonaco/jsInterop.js"></script>
<!--/BlazorMonaco-->

<script src="_framework/blazor.webassembly.js"></script>

[Max Shamanov]

Hello,

Please send us a sample project that reproduces the issue.

Thank you.

[Ингвар]

I have same exception when using BlazorMonaco package.
The problem appears if index.html contains the following lines:

<!-- code editor -->
<script src="_content/BlazorMonaco/jsInterop.js"></script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>

Exception output:

Code: Select all

blazor.webview.js:1
Blockly is not defined
ReferenceError: Blockly is not defined
    at eval (eval at <anonymous> (http://localhost/_framework/blazor.webview.js:1:3337), <anonymous>:24610:1)
    at eval (<anonymous>)
    at http://localhost/_framework/blazor.webview.js:1:3337
    at new Promise (<anonymous>)
    at beginInvokeJSFromDotNet (http://localhost/_framework/blazor.webview.js:1:3311)
    at http://localhost/_framework/blazor.webview.js:1:42795
    at EventTarget.<anonymous> (<anonymous>:1:202)
    at EmbeddedBrowserWebView.<anonymous> (<anonymous>:1:40673)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, TimeSpan timeout, Object[] args)
   at Stimulsoft.Report.Blazor.StiBlazorDesigner.JSInvokeAsync(String identifier, Object[] args)
   at Stimulsoft.Report.Blazor.StiBlazorDesigner.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

[Max Shamanov]

Hello,

Please send us a sample project that reproduces the issue.

Thank you.