英文:
"ReferenceError: monaco is not defined" when trying to set up a BlazorMonaco editor
问题
I am trying to setup a BlazorMonaco editor, but I keep on getting the error:
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
Unhandled exception in circuit 'u1AmXKcme53TZumhysV_MenrWwA9xjflVubUoLRRQzk'.
Microsoft.JSInterop.JSException: monaco is not defined
ReferenceError: monaco is not defined
Inspecting the compiled JavaScript, it seems that the issue is in the _content/BlazorMonaco/lib/monaco-editor/min-maps/vs/out-editor/vs/loader.js file. The error displayed in the console is:
properties of undefined (reading 'define')
at loader.js:1961:33
at loader.js:1973:13
which points to this line in loader.js:
if (typeof AMDLoader.global.define !== 'function' || !AMDLoader.global.define.amd) {
Code:
I followed the steps explained on the BlazorMonaco GitHub repository. A summary of the steps I implemented:
-
Installed the NuGet package to the project.
-
Add the script tags in our HTML
<head>:
<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>
- Create the following
.razorcomponent:
@using BlazorMonaco
@using BlazorMonaco.Editor
<h3>Code Editor</h3>
<StandaloneCodeEditor @ref="_editor" Id="sample-code-editor-123" ConstructionOptions="EditorConstructionOptions" />
@code {
private StandaloneCodeEditor _editor = null!;
private string _valueToSet = "";
private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
{
return new StandaloneEditorConstructionOptions
{
Language = "javascript",
GlyphMargin = true,
Value = "\"use strict\";\n" +
"function Person(age) {\n" +
" if (age) {\n" +
" this.age = age;\n" +
" }\n" +
"}\n" +
"Person.prototype.getAge = function () {\n" +
" return this.age;\n" +
"};\n"
};
}
}
I cannot find any information as to why this error occurs. It seems like we need a Monaco package of some sorts?
英文:
I am trying to setup a BlazorMonaco editor, but I keep on getting the error:
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
Unhandled exception in circuit 'u1AmXKcme53TZumhysV_MenrWwA9xjflVubUoLRRQzk'.
Microsoft.JSInterop.JSException: monaco is not defined
ReferenceError: monaco is not defined
Inspecting the compiled JavaScript, it seems that the issue is in the _content/BlazorMonaco/lib/monaco-editor/min-maps/vs/out-editor/vs/loader.js file. The error displayed in the console is:
properties of undefined (reading 'define')
at loader.js:1961:33
at loader.js:1973:13
which points to this line in loader.js:
if (typeof AMDLoader.global.define !== 'function' || !AMDLoader.global.define.amd) {
Code:
I followed the steps explained on the BlazorMonaco GitHub repository. A summary of the steps I implemented:
-
Installed the NuGet package to the project.
-
Add the script tags in our HTML
<head>:
<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>
- Create the following
.razorcomponent:
@using BlazorMonaco
@using BlazorMonaco.Editor
<h3>Code Editor</h3>
<StandaloneCodeEditor @ref="_editor" Id="sample-code-editor-123" ConstructionOptions="EditorConstructionOptions" />
@code {
private StandaloneCodeEditor _editor = null!;
private string _valueToSet = "";
private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
{
return new StandaloneEditorConstructionOptions
{
Language = "javascript",
GlyphMargin = true,
Value = "\"use strict\";\n" +
"function Person(age) {\n" +
" if (age) {\n" +
" this.age = age;\n" +
" }\n" +
"}\n" +
"Person.prototype.getAge = function () {\n" +
" return this.age;\n" +
"};\n"
};
}
}
I cannot find any information as to why this error occurs. It seems like we need a Monaco package of some sorts?
答案1
得分: 1
我们成功解决了这个错误。问题出现在第二步，修正的方法是将脚本标签（参见第二步）添加到你的 HTML <body> 标签中，而不是问题中提到的 <head> 标签。请注意，这些脚本标签必须放在 blazor.webassembly.js 文件的脚本标签之后。
换句话说，在你的 wwwroot/index.html 文件中，<body> 标签应该类似于这样：
<body>
<div id="app">
<svg class="loading-progress">
<circle r="40%" cx="50%" cy="50%" />
<circle r="40%" cx="50%" cy="50%" />
</svg>
<div class="loading-progress-text"></div>
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<!-- Loading modules for BLAZOR MONACO -->
<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>
</body>
正如 @ViRuSTriNiTy 提到的，错误是因为在我们现有的项目中实现 Monaco 编辑器时出现的副作用。我们的项目中也有 ag-grid，并最初使用 cdn 链接将 ag-grid 导入到一个 JavaScript 文件中。
import "https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.js";
import "https://cdn.jsdelivr.net/npm/ag-grid-enterprise/dist/ag-grid-enterprise.js";
在项目中同时使用 ag-grid 和 BlazorMonaco 时，出现了错误：
Microsoft.JSInterop.JSException: Can only have one anonymous define call per script file
将 cdn 链接替换为在 HTML <head> 中的 <script> 标签解决了这个问题。
<!-- Loading modules for AG GRID -->
<script src="https://cdn.jsdelivr.net/npm/ag-grid-enterprise@29.3.2/dist/ag-grid-enterprise.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css"/>
英文:
We managed to solve the error. One of the problems occurred in step 2, and the corrected method is to add the script tags (see step 2) to your HTML <body> tag, and not the <head> tag as mentioned in the question. Note that these script tags must be placed after the script tag for the blazor.webassembly.js file.
In other words, the <body> tag in your wwwroot/index.html file should look something like this:
<body>
<div id="app">
<svg class="loading-progress">
<circle r="40%" cx="50%" cy="50%" />
<circle r="40%" cx="50%" cy="50%" />
</svg>
<div class="loading-progress-text"></div>
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<!-- Loading modules for BLAZOR MONACO -->
<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>
</body>
As @ViRuSTriNiTy mentioned, though, the error was because of a side-effect that occurred when implementing the Monaco editor in our existing project. We also have ag-grid in our project, and initially used a cdn link to import ag-grid into a JavaScript file.
import "https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.js";
import "https://cdn.jsdelivr.net/npm/ag-grid-enterprise/dist/ag-grid-enterprise.js";
Having both ag-grid and BlazorMonaco as part of our project, gave the error:
Microsoft.JSInterop.JSException: Can only have one anonymous define call per script file
Replacing the cdn links with a <script> tag in the HTML <head> in wwwroot/index.html, solved this issue.
<!-- Loading modules for AG GRID -->
<script src="https://cdn.jsdelivr.net/npm/ag-grid-enterprise@29.3.2/dist/ag-grid-enterprise.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css"/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论