“ReferenceError: monaco is not defined” 尝试设置 BlazorMonaco 编辑器时发生

huangapple
go评论74阅读模式
英文:

"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:

  1. Installed the NuGet package to the project.

  2. 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>
  1. Create the following .razor component:
@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:

  1. Installed the NuGet package to the project.

  2. 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>
  1. Create the following .razor component:
@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"/>

huangapple
  • 本文由 发表于 2023年4月13日 15:15:13
  • 转载请务必保留本文链接：https://go.coder-hub.com/76002635.html
  • blazor
  • c#
  • monaco-editor
  • referenceerror
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定