尝试设置BlazorMonaco编辑器时"ReferenceError: monaco is not defined"

我正在尝试设置一个BlazorMonaco编辑器，但我一直得到错误:

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

检查编译后的JavaScript，似乎问题在_content/BlazorMonaco/lib/monaco-editor/min-maps/vs/out-editor/vs/loader.js文件中。控制台中显示的错误是:

properties of undefined (reading 'define')
at loader.js:1961:33
at loader.js:1973:13

指向loader.js中的这一行:

if (typeof AMDLoader.global.define !== 'function' || !AMDLoader.global.define.amd) {

代码:

我遵循BlazorMonaco GitHub存储库上解释的步骤。我实现的步骤的总结:

安装NuGet包到项目
在我们的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>

创建.razor组件:

@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"
};
}
}

我找不到任何关于为什么发生这个错误的信息。似乎我们需要某种Monaco包?

我们设法解决了这个错误。在步骤2中出现了一个问题，正确的方法是将脚本标记(参见步骤2)添加到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所提到的，这个错误是由于在我们现有的项目中实现摩纳哥编辑器时发生的副作用。我们的项目中也有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

将wwwroot/index.html中的HTML<head>中的cdn链接替换为<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"/>

相关内容

最新更新

热门标签：