search

serdarciplak / BlazorMonaco

Blazor component for Microsoft's Monaco Editor which powers Visual Studio Code.
https://serdarciplak.github.io/BlazorMonaco/
MIT License
454 stars 98 forks source link

Errors when trying to use "vanilla" standalone code editor #75

Closed svenboulanger closed 1 year ago

svenboulanger commented 1 year ago

I'm trying to migrate from v2.1 to 3.0 and I'm having some issues.

I have removed as many potential issues I could find, but am encountering the following console messages in the browser:

WARNING : Couldn't find the editor with id: script-editor editors.length: 0
jsInterop.js:144 

WARNING : Couldn't find the editor with id: style-editor editors.length: 1
loader.js:712          

GET https://localhost:44390/_content/BlazorMonaco/lib/monaco-editor/min/vs/language/css/fillers/monaco-editor-core.js net::ERR_ABORTED 404
e.load @ loader.js:712
e.load @ loader.js:640
f @ loader.js:1699
s._loadModule @ loader.js:1711
s._resolve @ loader.js:1796
s.defineModule @ loader.js:1443
g @ loader.js:1893
(anonymous) @ cssMode.js:7
loader.js:263 

Uncaught (in promise) Error: [object Event]
    at Object.E [as ensureError] (loader.js:263:22)
    at s._createLoadError (loader.js:1530:33)
    at s._onLoadError (loader.js:1541:30)
    at f (loader.js:1687:27)
    at Object.errorback (loader.js:1707:25)
    at e.triggerErrorback (loader.js:653:36)
    at loader.js:640:151
    at HTMLScriptElement.f (loader.js:676:17)
E @ loader.js:263
s._createLoadError @ loader.js:1530
s._onLoadError @ loader.js:1541
f @ loader.js:1687
(anonymous) @ loader.js:1707
e.triggerErrorback @ loader.js:653
(anonymous) @ loader.js:640
f @ loader.js:676
Promise.then (async)
(anonymous) @ fake:1
(anonymous) @ standaloneLanguages.ts:62
invoke @ event.ts:607
deliver @ event.ts:802
fire @ event.ts:770
_createAndGetLanguageIdentifier @ languageService.ts:87
(anonymous) @ languageService.ts:63
u @ languageService.ts:105
createById @ languageService.ts:62
P @ standaloneCodeEditor.ts:573
D @ standaloneCodeEditor.ts:442
_createInstance @ instantiationService.ts:110
createInstance @ instantiationService.ts:76
E @ standaloneEditor.ts:44
create @ jsInterop.js:46
(anonymous) @ blazor.webassembly.js:1
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
Gt @ blazor.webassembly.js:1
Ii @ dotnet.7.0.2.tt5z2s8frk.js:5
_mono_wasm_invoke_js_blazor @ dotnet.7.0.2.tt5z2s8frk.js:14
$func313 @ 00992bd6:0x1d4d8
$func283 @ 00992bd6:0x1c906
$func221 @ 00992bd6:0xdff6
$func220 @ 00992bd6:0xce95
$func8115 @ 00992bd6:0x1a2195
$func2054 @ 00992bd6:0x85bba
$func2059 @ 00992bd6:0x86222
$func2086 @ 00992bd6:0x882e1
$mono_wasm_invoke_method_ref @ 00992bd6:0x9bd1
Module._mono_wasm_invoke_method_ref @ dotnet.7.0.2.tt5z2s8frk.js:14
BINDINGS_SetTaskSourceResultRef @ BINDINGS_SetTaskSourceResultRef:27
(anonymous) @ dotnet.7.0.2.tt5z2s8frk.js:5
Promise.then (async)
si @ dotnet.7.0.2.tt5z2s8frk.js:5
Qs @ dotnet.7.0.2.tt5z2s8frk.js:5
Xs @ dotnet.7.0.2.tt5z2s8frk.js:5
receiveHotReload @ blazor-hotreload.js:2
Gt @ blazor.webassembly.js:1
Ii @ dotnet.7.0.2.tt5z2s8frk.js:5
_mono_wasm_invoke_js_blazor @ dotnet.7.0.2.tt5z2s8frk.js:14
$func313 @ 00992bd6:0x1d4d8
$func283 @ 00992bd6:0x1c906
$func221 @ 00992bd6:0xdff6
$func220 @ 00992bd6:0xce95
$func8115 @ 00992bd6:0x1a2195
$func2054 @ 00992bd6:0x85bba
$func2059 @ 00992bd6:0x86222
$func2086 @ 00992bd6:0x882e1
$mono_wasm_invoke_method_ref @ 00992bd6:0x9bd1
Module._mono_wasm_invoke_method_ref @ dotnet.7.0.2.tt5z2s8frk.js:14
_Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS @ _Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS:26
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
Gt @ blazor.webassembly.js:1
Ii @ dotnet.7.0.2.tt5z2s8frk.js:5
_mono_wasm_invoke_js_blazor @ dotnet.7.0.2.tt5z2s8frk.js:14
$func313 @ 00992bd6:0x1d4d8
$func283 @ 00992bd6:0x1c906
$func221 @ 00992bd6:0xdff6
$func220 @ 00992bd6:0xce95
$func8115 @ 00992bd6:0x1a2195
$func2054 @ 00992bd6:0x85bba
$func2059 @ 00992bd6:0x86222
$func2086 @ 00992bd6:0x882e1
$mono_wasm_invoke_method_ref @ 00992bd6:0x9bd1
Module._mono_wasm_invoke_method_ref @ dotnet.7.0.2.tt5z2s8frk.js:14
BINDINGS_SetTaskSourceResultRef @ BINDINGS_SetTaskSourceResultRef:27
Ki.t.<computed> @ dotnet.7.0.2.tt5z2s8frk.js:5
(anonymous) @ dotnet.7.0.2.tt5z2s8frk.js:5
Promise.then (async)
si @ dotnet.7.0.2.tt5z2s8frk.js:5
Qs @ dotnet.7.0.2.tt5z2s8frk.js:5
Xs @ dotnet.7.0.2.tt5z2s8frk.js:5
Ke._internal.getSatelliteAssemblies @ blazor.webassembly.js:1
Gt @ blazor.webassembly.js:1
Ii @ dotnet.7.0.2.tt5z2s8frk.js:5
_mono_wasm_invoke_js_blazor @ dotnet.7.0.2.tt5z2s8frk.js:14
$func313 @ 00992bd6:0x1d4d8
$func283 @ 00992bd6:0x1c906
$func221 @ 00992bd6:0xdff6
$func220 @ 00992bd6:0xce95
$func8115 @ 00992bd6:0x1a2195
$func2054 @ 00992bd6:0x85bba
$func2059 @ 00992bd6:0x86222
$func2086 @ 00992bd6:0x882e1
$mono_wasm_invoke_method_ref @ 00992bd6:0x9bd1
Module._mono_wasm_invoke_method_ref @ dotnet.7.0.2.tt5z2s8frk.js:14
_SimpleCircuitOnline__entrypoint @ _SimpleCircuitOnline__entrypoint:26
(anonymous) @ dotnet.7.0.2.tt5z2s8frk.js:5
ji @ dotnet.7.0.2.tt5z2s8frk.js:5
callEntryPoint @ blazor.webassembly.js:1
Vt @ blazor.webassembly.js:1
await in Vt (async)
(anonymous) @ (index):81

In my index.html, I'm using the following possibly relevant script definitions (I am using Brotli compression for statically hosted files):

    <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="js/decode.min.js"></script>
    <script src="_framework/blazor.webassembly.js" autostart="false"></script>
    <script>
        Blazor.start({
            loadBootResource: function (type, name, defaultUri, integrity) {
                // For framework resources, use the precompressed .br files for faster downloads
                // This is needed only because GitHub pages doesn't natively support Brotli (or even gzip for .dll files)
                if (type !== 'dotnetjs' && location.hostname !== 'localhost') {
                    return (async function () {
                        const response = await fetch(defaultUri + '.br', { cache: 'no-cache' });
                        if (!response.ok) {
                            throw new Error(response.statusText);
                        }
                        const originalResponseBuffer = await response.arrayBuffer();
                        const originalResponseArray = new Int8Array(originalResponseBuffer);
                        const decompressedResponseArray = BrotliDecode(originalResponseArray);
                        const contentType = type === 'dotnetwasm' ? 'application/wasm' : 'application/octet-stream';
                        return new Response(decompressedResponseArray, { headers: { 'content-type': contentType } });
                    })();
                }
            }
        });
    </script>

In my Index.razor page, I have the following definitions:

        <TabMenu>
            <Tab Title="Script">
                <StandaloneCodeEditor @ref="_scriptEditor" Id="script-editor" CssClass="full-height" ConstructionOptions="GetStyleOptions" />
            </Tab>
            <Tab Title="Style">
                <div class="full-width">
                    <a href="javascript:void(0);" class="btn" @onclick="@(x => _styleEditor.SetValue(GraphicalCircuit.DefaultStyle))">Restore default style</a>
                </div>
                <StandaloneCodeEditor @ref="_styleEditor" Id="style-editor" CssClass="full-height" ConstructionOptions="GetStyleOptions" />
            </Tab>
    </TabMenu>

And the provider for the style options:

        private static StandaloneEditorConstructionOptions GetStyleOptions(StandaloneCodeEditor editor)
        {
            return new StandaloneEditorConstructionOptions
            {
                AutomaticLayout = true,
                Language = "text/css",
                WordWrap = "on",
                Value = ""
            };
        }

If I change the language from "text/css" to "javascript" (like in the example in the readme) I can get rid of the errors, but the warnings remain.

serdarciplak commented 1 year ago

Hi @svenboulanger.

The error is about the fact that text/css is not one of the predefined languages in Monaco Editor. I suppose you're trying to use the editor for css. If so, you can set language to css. There is a list of supported languages here.

The warnings are actually expected. Before creating a new editor instance, it checks to see if there's already an existing editor instance with that id. That log is written at that moment that this is the first instance with that id and it's safe to move on. But I see that this log causes a confusion. I'll take a note not to remove it. But, you can go ahead and use it as all is fine.

snehabihani commented 11 months ago

I am also getting same error using mudblazor dialogs