BlazorMonaco
BlazorMonaco copied to clipboard
serdarciplak
Error when running in Electron
Can't have it to run in Electron.
To reproduce: Create a new Blazor Server project. Add ElectronNet.Api Add Blazor Monaco and add an MonacoEditor according to instructions.
electronize start
It's working fine when running in IIS with dotnet run, but not when running as Electron with electronize start..
Hi @matengo. What's the error message you get? I do not have electron setup on my computer.
Hi, this is the error message in the console:
stdout: warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
Unhandled exception rendering component: monaco is not defined
ReferenceError: monaco is not defined
at Object.create (http://localhost:8001/_content/BlazorMonaco/jsInterop.js:39:22)
at http://localhost:8001/_framework/blazor.server.js:8:31619
at new Promise (
I've also run into this, but made a small amount of progress. Think it's basically this issue: https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined
If you follow the most suggested answer, and wrap the Monaco JS imports you then get to a second error:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at Object.onFirstListenerAdd (event.ts:19)
at _event._event (event.ts:501)
at new t (suggestRangeHighlighter.ts:104)
at suggestRangeHighlighter.ts:97
at Function.t._invokeFactory (loader.js:1036)
at t.complete (loader.js:1046)
at s._onModuleComplete (loader.js:1663)
at s._resolve (loader.js:1623)
at s.defineModule (loader.js:1274)
at n (loader.js:1713)
EDIT: That was just me being stupid I think, didn't have the scripts in the correct place.
I've got this in my _Host.cshtml
@page "/"
@namespace WealthKernel.Pdfs.TemplateHelper.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>WealthKernel.Pdfs.TemplateHelper</title>
<base href="~/"/>
<link href="css/site.css" rel="stylesheet"/>
<link href="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.css" rel="stylesheet" />
</head>
<body>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
<script>require.config({ paths: { 'vs': '_content/BlazorMonaco/lib/monaco-editor/min/vs' } });</script>
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
<script>if (window.module) module = window.module;</script>
<script src="_content/BlazorMonaco/jsInterop.js"></script>
<script src="_framework/blazor.server.js"></script>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered"/>
</app>
</body>
</html>
No errors now, but the editor doesn't start, inspecting the HTML you can see:
<div id="any-id-string" class="monaco-editor-container "></div>
But that's it.
@dantheman999301 I think you've found the solution, but did not apply it fully. Can you please try adding the module check lines as below to cover all js files? The javascript that processes the monaco-editor-container div and converts it to an actual monaco editor instance is in BlazorMonaco/jsInterop.js file and it's not covered by the module checks in your example.
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
<script>require.config({ paths: { 'vs': '_content/BlazorMonaco/lib/monaco-editor/min/vs' } });</script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
<script src="_content/BlazorMonaco/jsInterop.js"></script>
<script src="_framework/blazor.server.js"></script>
<script>if (window.module) module = window.module;</script>
@dantheman999301 I think you've found the solution, but did not apply it fully. Can you please try adding the module check lines as below to cover all js files? The javascript that processes the monaco-editor-container div and converts it to an actual monaco editor instance is in BlazorMonaco/jsInterop.js file and it's not covered by the module checks in your example.
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script> <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script> <script>require.config({ paths: { 'vs': '_content/BlazorMonaco/lib/monaco-editor/min/vs' } });</script> <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script> <script src="_content/BlazorMonaco/jsInterop.js"></script> <script src="_framework/blazor.server.js"></script> <script>if (window.module) module = window.module;</script>
I have encountered the same issue but sadly this does not fix it. Experiencing the same as @dantheman999301 where it now appears where it should but the actual editor doesn't load.
According to this Stackoverflow answer monaco only loads with its own loader. I guess this is an issue as electron uses its own loader?
EDIT Coming from this announcement by Richard Lander we may have to wait until .NET 6 to ship with Blazor Desktop Apps, thus removing the need for electron. That is unless @serdarciplak you have any ideas on how to work around this?
Are there any updates on getting this to run in Electron.NET? Would be pretty neat, as Blazor Desktop will only have a final release at the end of the year :/ Is there a workaround to get the Monaco loader to load it in maybe? I haven't looked to deep into it yet (maybe somebody got it to work).
Great news! I seem to have fixed the issue now. The Monaco is loading in a electron window now. Here is my _Host.cshtml
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script>if (window.module) module = window.module;</script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
<script>require.config({ paths: { 'vs': '_content/BlazorMonaco/lib/monaco-editor/min/vs' } });</script>
<script>require(['_content/BlazorMonaco/lib/monaco-editor/vs/editor/editor.main'], function onMonacoLoaded(){console.log(monaco);});</script>
<script>
// Monaco uses a custom amd loader that over-rides node's require.
// Keep a reference to node's require so we can restore it after executing the amd loader file.
var nodeRequire = global.require;
</script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
<script>
// Save Monaco's amd require and restore Node's require
var amdRequire = global.require;
global.require = nodeRequire;
// ... remainder of example below
</script>
<script src="_content/BlazorMonaco/jsInterop.js"></script>
<script src="_framework/blazor.server.js"></script>
I am not sure, what here is required and which lines are not making any difference, but it works.
Sources: https://github.com/microsoft/monaco-editor/issues/90#issuecomment-259997687 https://stackoverflow.com/a/50051855
I have a similar issue while I tried to integrate BlazorMonaco with Chromely demos
Unfortunately, the suggested fix didn't work
Great news! I seem to have fixed the issue now. The Monaco is loading in a electron window now. Here is my _Host.cshtml
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script> <script>if (window.module) module = window.module;</script> <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script> <script>require.config({ paths: { 'vs': '_content/BlazorMonaco/lib/monaco-editor/min/vs' } });</script> <script>require(['_content/BlazorMonaco/lib/monaco-editor/vs/editor/editor.main'], function onMonacoLoaded(){console.log(monaco);});</script> <script> // Monaco uses a custom amd loader that over-rides node's require. // Keep a reference to node's require so we can restore it after executing the amd loader file. var nodeRequire = global.require; </script> <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.nls.js"></script> <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script> <script> // Save Monaco's amd require and restore Node's require var amdRequire = global.require; global.require = nodeRequire; // ... remainder of example below </script> <script src="_content/BlazorMonaco/jsInterop.js"></script> <script src="_framework/blazor.server.js"></script>I am not sure, what here is required and which lines are not making any difference, but it works.
Sources: microsoft/monaco-editor#90 (comment) https://stackoverflow.com/a/50051855
What is strange: When I run app I could see smth like an "edge" of monaco editor
I have a similar issue while I tried to integrate BlazorMonaco with Chromely demos
Unfortunately, the suggested fix didn't work
Great news! I seem to have fixed the issue now. The Monaco is loading in a electron window now. Here is my _Host.cshtml
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script> <script>if (window.module) module = window.module;</script> <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script> <script>require.config({ paths: { 'vs': '_content/BlazorMonaco/lib/monaco-editor/min/vs' } });</script> <script>require(['_content/BlazorMonaco/lib/monaco-editor/vs/editor/editor.main'], function onMonacoLoaded(){console.log(monaco);});</script> <script> // Monaco uses a custom amd loader that over-rides node's require. // Keep a reference to node's require so we can restore it after executing the amd loader file. var nodeRequire = global.require; </script> <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.nls.js"></script> <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script> <script> // Save Monaco's amd require and restore Node's require var amdRequire = global.require; global.require = nodeRequire; // ... remainder of example below </script> <script src="_content/BlazorMonaco/jsInterop.js"></script> <script src="_framework/blazor.server.js"></script>I am not sure, what here is required and which lines are not making any difference, but it works. Sources: microsoft/monaco-editor#90 (comment) https://stackoverflow.com/a/50051855
What is strange: When I run app I could see smth like an "edge" of monaco editor
Set the height in CSS
.monaco-editor-container {
height: 600px;
border: 1px solid gray;
}
I had the same problem using Electron and Blazor Server. I found out a few things.
First I was missing this in <head> in _Host.cshtml <link href="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.css" rel="stylesheet" />
I put the scripts defined in README before _framework/blazor.server.js <component type="typeof(App)" render-mode="ServerPrerendered" /> <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script> <script>require.config({ paths: { 'vs': '_content/BlazorMonaco/lib/monaco-editor/min/vs' } });</script> <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script> <script src="_content/BlazorMonaco/jsInterop.js"></script> <script src="_framework/blazor.server.js"></script>
The next issue was that I did not have <div class="col-xl-10">, I only had the <div class="row"> around the <MonacoEditor/> so I surrounded it with that div. That made it finally show up but it was tiny. So I added the style that was also a suggested solution.
<div class="row"> <div class="col-xl-10"> <style> .monaco-editor-container { height: 600px; border: 1px solid gray; } </style> <MonacoEditor Id="monacoEditor-1" @ref="_editor" ConstructionOptions="EditorConstructionOptions" /> </div> </div>
