Blazor 컴포넌트 렌더링 오류: "Found malformed component comment"

6/30/2024
2 minutes to read

Blazor 애플리케이션을 작업할 때 다음과 같은 오류를 만날 수 있습니다:

blazor.server.js:1 Uncaught Error: Found malformed component comment at Blazor:{...}

이 오류는 Blazor 프레임워크가 서버 측 렌더링에 사용되는 컴포넌트 주석을 파싱하는 동안 문제가 발생했음을 나타냅니다. 원인은 종종 Razor 파일 내의 잘못된 HTML 구문 또는 컴포넌트 매개 변수와 관련이 있습니다.

일반적인 원인

닫히지 않은 HTML 태그: 이 오류의 가장 일반적인 원인은 Razor 파일 내에 닫히지 않았거나 잘못 닫힌 HTML 태그입니다.
잘못된 컴포넌트 매개 변수: Blazor 컴포넌트에 잘못 전달되었거나 누락된 매개 변수로 인해 발생할 수 있습니다.

예시 시나리오

다음과 같은 간단한 Razor 페이지에서 이 오류가 발생할 수 있습니다:

@page "/example"
@using Microsoft.AspNetCore.Components

<h3>Example Component</h3>

<p>This is an example paragraph.<p> <!-- 닫히지 않은 p 태그 -->

<component type="typeof(MyApp.Components.MyComponent)"
           render-mode="ServerPrerendered"
           param-MyParam="value" />

위 예시에서 <p> 태그를 잘못 사용한 것이 문제의 원인이었습니다. 닫는 태그가 <p>가 아니라 </p>여야 합니다.

해결 방법

문제를 해결하려면 HTML 태그를 올바르게 닫아야 합니다. 다음과 같이 수정할 수 있습니다:

@page "/example"
@using Microsoft.AspNetCore.Components

<h3>Example Component</h3>

<p>This is an example paragraph.</p> <!-- 올바르게 닫힌 p 태그 -->

<component type="typeof(MyApp.Components.MyComponent)"
           render-mode="ServerPrerendered"
           param-MyParam="value" />