Could not find 'blazorMonaco.editor.create'

[LUCKYONE-CC]

Hi. I wanted to include the BlazorMonaco editor in my existing Blazor WASM .NET 6 project. I downloaded the NuGet package, included the scripts above the <script src="_framework/blazor.webassembly.js"></script> , did the imports and finally packed the editor into the .razor file.

@page"/codeeditor"

<h3>CodeEditor</h3>

<StandaloneCodeEditor Id="1" ConstructionOptions="EditorConstructionOptions" />

@code{
    private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
    {
        return new StandaloneEditorConstructionOptions
            {
                AutomaticLayout = true,
                Language = "javascript",
                Value = "function xyz() {\n" +
                        " console.log(\"Hello world!\");\n" +
                        "}"
            };
    }
}

I get the following error when I open this page:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Could not find 'blazorMonaco.editor.create' ('blazorMonaco' was undefined). findFunction/<@https://localhost:7009/_framework/blazor.webassembly.js:1:328 findFunction@https://localhost:7009/_framework/blazor.webassembly.js:1:296 _@https://localhost:7009/_framework/blazor.webassembly.js:1:2437 beginInvokeJSFromDotNet/s<@https://localhost:7009/_framework/blazor.webassembly.js:1:3325 beginInvokeJSFromDotNet@https://localhost:7009/_framework/blazor.webassembly.js:1:3306 St@https://localhost:7009/_framework/blazor.webassembly.js:1:59960 _mono_wasm_invoke_js_blazor@https://localhost:7009/_framework/dotnet.6.0.22.pkp2hk4xho.js:1:195300 @:wasm-function[1]:0x0 @:wasm-function[219]:0x1a4c1 @:wasm-function[167]:0xce8f @:wasm-function[166]:0xbd73 @:wasm-function[2815]:0xabf2c @:wasm-function[1619]:0x6fcb4 @:wasm-function[1623]:0x70321 @:wasm-function[118]:0x969f Module._mono_wasm_invoke_method@https://localhost:7009/_framework/dotnet.6.0.22.pkp2hk4xho.js:1:219002 managedMicrosoft_AspNetCore_Components_WebAssemblyMicrosoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS@https://mono-wasm.invalid/managedMicrosoft_AspNetCore_Components_WebAssemblyMicrosoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS:16:40 endInvokeJSFromDotNet@https://localhost:7009/_framework/blazor.webassembly.js:1:42214 beginInvokeJSFromDotNet/<@https://localhost:7009/_framework/blazor.webassembly.js:1:3371

Microsoft.JSInterop.JSException: Could not find 'blazorMonaco.editor.create' ('blazorMonaco' was undefined). findFunction/<@https://localhost:7009/_framework/blazor.webassembly.js:1:328 findFunction@https://localhost:7009/_framework/blazor.webassembly.js:1:296 _@https://localhost:7009/_framework/blazor.webassembly.js:1:2437 beginInvokeJSFromDotNet/s<@https://localhost:7009/_framework/blazor.webassembly.js:1:3325 beginInvokeJSFromDotNet@https://localhost:7009/_framework/blazor.webassembly.js:1:3306 St@https://localhost:7009/_framework/blazor.webassembly.js:1:59960 _mono_wasm_invoke_js_blazor@https://localhost:7009/_framework/dotnet.6.0.22.pkp2hk4xho.js:1:195300 @:wasm-function[1]:0x0 @:wasm-function[219]:0x1a4c1 @:wasm-function[167]:0xce8f @:wasm-function[166]:0xbd73 @:wasm-function[2815]:0xabf2c @:wasm-function[1619]:0x6fcb4 @:wasm-function[1623]:0x70321 @:wasm-function[118]:0x969f Module._mono_wasm_invoke_method@https://localhost:7009/_framework/dotnet.6.0.22.pkp2hk4xho.js:1:219002 managedMicrosoft_AspNetCore_Components_WebAssemblyMicrosoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS@https://mono-wasm.invalid/managedMicrosoft_AspNetCore_Components_WebAssemblyMicrosoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS:16:40 endInvokeJSFromDotNet@https://localhost:7009/_framework/blazor.webassembly.js:1:42214 beginInvokeJSFromDotNet/<@https://localhost:7009/_framework/blazor.webassembly.js:1:3371

at Microsoft.JSInterop.JSRuntime.d__161[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext() at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args) at BlazorMonaco.Helpers.JsRuntimeExt.SafeInvokeAsync(IJSRuntime jsRuntime, String identifier, Object[] args) at BlazorMonaco.Editor.Global.Create(IJSRuntime jsRuntime, String domElementId, StandaloneEditorConstructionOptions options, EditorOverrideServices overrideServices, DotNetObjectReference1 dotnetObjectRef) at BlazorMonaco.Editor.StandaloneCodeEditor.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

[MattAbar]

I am getting the same error in my Blazor WASM app. There is a closed issue with the same problem Could not create monacoeditor #69, where the answer was "looks like the js files are missing". I confirmed the files are missing but I am new to Blazor and NuGet and am not sure how to fix.

When running my app, the /bin/.../_content/BlazorMonaco folders/files do not get created. I think the package is supposed to set the /bin/.../_content/BlazorMonaco up automatically, correct? Or maybe provide a virtual reference? I couldn't find where this would happen in the source. I tried manually creating the files/folders by copying the jsInterop.js and /lib files from the source. This led to a new error "Conflicting assets with the same target path '_content/BlazorMonaco/jsInterop.js'. For assets 'Identity: C:\Users\Matt.nuget\packages\blazormonaco\3.1.0\staticwebassets\jsInterop.js"

I tried uninstalling/reinstalling the package from the command line and VS package screen. And clean/rebuild.

Would appreciate some help.

My index.html is:

<body class="disable-scroll">
    <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>

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

</body>

[PawelStadnicki]

Hi @MattAbar , I started today also without Blazor knowledge. I noticed the lack of the resource files necessary to work with this package that is mentioned on the page: _content/*

But I found them where Nuget package is downloaded. Click on the BlazorMonaco in dependencies and you will find the location of the package, like C:\Users\yourusername .nuget\packages\blazormonaco\3.1.0

In my case, the files are under staticwebassets folder

I copied this folder to wwwroot (where I also have Bootstrap and other files). Notice that this may differ depending of the template you used to create the project.

Then I referenced these files in my App.razor (it may also be different in your case) as

<script src="staticwebassets/lib/monaco-editor/min/vs/loader.js"></script>
<script src="staticwebassets/lib/monaco-editor/min/vs/editor/editor.main.js"></script>

And it worked

PS notice the path now does not contain the blazor monaco as i nthe original example 👍 it is

[serdarciplak]

If the app is configured correctly and the NuGet package is installed normally, dotnet automatically makes the staticwebassets of all packages under the _content/<package-name>/ paths.

You can check out the related Microsoft doc about static web assets here : https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/static-files?view=aspnetcore-8.0