Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Problems with Mudblazor? "Found markup with unexpected name 'StandaloneCodeEditor' #123

Open
0x100001 opened this issue Feb 26, 2024 · 2 comments
Open

Problems with Mudblazor? "Found markup with unexpected name 'StandaloneCodeEditor' #123

0x100001 opened this issue Feb 26, 2024 · 2 comments

Comments

@0x100001
Copy link

0x100001 commented Feb 26, 2024 •
edited

Hey there,

I haven't been working with Blazor for that long. I currently use MudBlazor and am trying to integrate BlazorMonaco.

If I test the following code:
<StandaloneCodeEditor Id="my-editor-instance-id" />

The following error message appears:

Found markup element with unexpected name 'StandaloneCodeEditor'. If this is intended to be a component, add a @using directive for its namespace.

I followed the guide. My _Layout.cshtml currently looks like this:

@using Microsoft.AspNetCore.Components.Web
@namespace NetLock_Web_Console.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <component type="typeof(HeadOutlet)" render-mode="Server" />
</head>
<body>
    @RenderBody()

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.server.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
    <script src="js/custom.js"></script>
    <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>
</html>

My Imports like this:

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using MudBlazor
@using NetLock_Web_Console
@using NetLock_Web_Console.Shared
@using Blazored.LocalStorage
@using BlazorMonaco
@using BlazorMonaco.Editor
@using BlazorMonaco.Languages

Is there possibly a problem with MudBlazor used in combination, or am I missing something simple? Help is really appreciated.
@0x100001 0x100001 changed the title Problems with Mudblazor? "Found markup with unexpected name Problems with Mudblazor? "Found markup with unexpected name 'StandaloneCodeEditor' Feb 26, 2024
@SommerEngineering
Copy link

I have tested MudBlazor (6.16.0) together with BlazorMonaco (3.2.0) and it works:

A specific *.blazor file:

<MudTabPanel Text="..." Icon="...">
            <StandaloneCodeEditor ConstructionOptions="@this..." OnDidChangeModelContent="@this..." />
</MudTabPanel>

Imports:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using MudBlazor
@using BlazorMonaco
@using BlazorMonaco.Editor
@using BlazorMonaco.Languages

App.razor (I use the latest template of .NET 8):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <base href="/"/>
    <link rel="stylesheet" href="app.css"/>
    <link rel="icon" type="image/png" href="favicon.png"/>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <HeadOutlet/>
</head>

<body>
    <Routes @rendermode="new InteractiveServerRenderMode(prerender: false)"/>
    <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="_framework/blazor.web.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
    <script src="app.js"></script>
</body>

</html>

@0x100001
Copy link
Author

@SommerEngineering Thank you for your contribution. That's strange. I was using an older template & just updated MudBlazor. I double checked and it still doesn't work. I will look into it further when the time is right. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@SommerEngineering @0x100001