Blazor TypeError：无法在 Object.e [as removeLogicalChild] 处读取 null 的属性“removeChild”

Question

I created a component for a dual list box. Everything is fine but when I submit I get an error.

 <EditForm Model="Model.Report" class="kt-form" OnValidSubmit="Model.OnSearch">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Columns</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <Project.Components.DualListbox ReportColumns="Model.Report.ReportColumns" Id="ReportColumns" @bind-Value="@Model.Report.ReportColumns"></Project.Components.DualListbox>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" @onclick="Model.OnCloseModal"><i class="la la-close"></i> Close</button>
                    <button type="submit" class="btn btn-primary btn-sm"><i class="la la-exchange"></i> Change</button>
                </div>
            </EditForm>

DualListbox Razor code :

@typeparam TValue
@inherits InputBase<TValue>


@if (ReportColumns != null)
{
    <select id="@Id" class="kt-dual-listbox" multiple>

        @foreach (var column in ReportColumns.OrderBy(c => c.Sort))
        {
            if (column.IsChecked == 1)
            {
                <option value="@column.Id" selected>@column.Title</option>
            }
            else
            {
                <option value="@column.Id">@column.Title</option>
            }
        }
    </select>
}

* DualListbox code-behind *:

using Project.Models;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.JSInterop;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Threading.Tasks;

namespace Project.Components
{
    public partial class DualListbox<TValue> : InputBase<TValue>
    {
        [Parameter] public string Id { get; set; }
        [Inject] IJSRuntime JSRuntime { get; set; }
        [Parameter] public ICollection<ReportColumn> ReportColumns { get; set; }

        public DotNetObjectReference<DualListbox<TValue>> DotNetRef;
        [Parameter] public EventCallback<object> OnChanged { get; set; }
        protected override bool TryParseValueFromString(string value, out TValue result, out string validationErrorMessage)
        {
            try
            {
                if (value == "null")
                {
                    value = null;
                }
                if (typeof(TValue) == typeof(string))
                {
                    result = (TValue)(object)value;
                    validationErrorMessage = null;

                    return true;
                }
                else if (typeof(TValue) == typeof(int) || typeof(TValue) == typeof(int?))
                {
                    int.TryParse(value, NumberStyles.Integer, CultureInfo.InvariantCulture, out var parsedValue);
                    result = (TValue)(object)parsedValue;
                    validationErrorMessage = null;

                    return true;
                }

                throw new InvalidOperationException($"{GetType()} does not support the type '{typeof(TValue)}'.");
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

        protected override void OnInitialized()
        {
            base.OnInitialized();
            DotNetRef = DotNetObjectReference.Create(this);
        }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            await base.OnAfterRenderAsync(firstRender);
            if (firstRender)
            {
                await JSRuntime.InvokeVoidAsync("dualListboxComponent.init", Id, DotNetRef, "Change_SelectWithFilterBase");
            }
        }

        [JSInvokable("Change_SelectWithFilterBase")]
        public void Change(string value)
        {
            try
            {
                if (value == "null")
                {
                    value = null;
                }

                var array = value.Split("#");
                if (array[0] == "add")
                {
                    int _value = int.Parse(array[1]);
                    var report = ReportColumns.Where(c => c.Id == _value).FirstOrDefault();
                    report.IsChecked = 1;
                }
                else
                {
                    int _value = int.Parse(array[1]);
                    var report = ReportColumns.Where(c => c.Id == _value).FirstOrDefault();
                    report.IsChecked = 0;
                } 

            }
            catch (Exception ex)
            {
                throw ex;
            }

            if (OnChanged.HasDelegate)
                OnChanged.InvokeAsync(value);
        }
    }
}

[2020-02-12T07:42:28.867Z] Error: There was an error applying batch 7. e.log @ blazor.server.js:15 blazor.server.js:8 Uncaught (in promise)

TypeError: Cannot read property 'insertBefore' of null at Object.s [as insertLogicalChild] (blazor.server.js:8) at e.insertText (blazor.server.js:8) at e.insertFrame (blazor.server.js:8) at e.applyEdits (blazor.server.js:8) at e.updateComponent (blazor.server.js:8) at Object.t.renderBatch (blazor.server.js:1) at e. (blazor.server.js:15) at blazor.server.js:15 at Object.next (blazor.server.js:15) at blazor.server.js:15 blazor.server.js:15 [2020-02-12T07:42:28.926Z] Error: System.AggregateException: One or more errors occurred. (TypeError: Cannot read property 'insertBefore' of null) ---> System.InvalidOperationException: TypeError: Cannot read property 'insertBefore' of null at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents) --- End of inner exception stack trace ---

Answer 1

So, this may not be your exact answer, but it may give a clue to someone who stumbles upon this SO question. In my case, this was the result of swapping out a Font Awesome icon within button text as opposed to using two separate buttons.

This may be related because you are using the JSRuntime in combination with "report.IsChecked = 1;"syntax, which I assume is changing UI element state client-side that Blazor Server is trying to (but unable) to track.

When I used conditional logic within a single button to swap out the icon, I received an error, "blazor TypeError: Cannot read property 'removeChild' of null". This syntax using two separate buttons, however, worked just fine:

@if (AllowAllPartners)
{
    <button @onclick="(() => AllowAllPartnersToggle())">
        <i class="far fa-check-square"></i>
    </button>
}
else
{
    <button @onclick="(() => AllowAllPartnersToggle())">
        <i class="far fa-square"></i>
    </button>
}

Answer 2

My problem was in FontAwesome too. In my case, put icons inside <span></span> solved problems.

   @if (conditional)
            {
                <span>
                    <i class="fas fa-check"></i>
                </span>
            }
            else
            {
                <span>
                    <i class="fas fa-times"></i>
                </span>
            }

Answer 3

In my case the same error was caused by my use of Bootstrap Dismissible Alerts, containing a MatBlazor component, and/or FontAwesome icon.

Placing the alert inside another <div></div> solved this issue. Placing the icon/component within the alert inside <span></span> did not work, but I found this solution thanks to Diego's suggestion :-)

   <div>
      <div class="alert alert-warning alert-dismissible fade show" role="alert">
          Warning Text <MatTooltip Tooltip="Tooltip text" Context="_context1" Wrap="true" Position="@MatTooltipPosition.Top"><i class="far fa-question-circle"></i></MatTooltip>
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
             <span aria-hidden="true">&times;</span>
          </button>
       </div>
    </div>