Aura to LWC migration issue with lightning-tree-grid (insertBefore/appendChild errors)

Question

I am migrating an existing Aura component to LWC, but am having difficulties with the standard lightning-tree-grid component. Once the gridData is loaded I get two errors in the console:

• Error: [LWC error]: The appendChild method is available only on elements that use the lwc:dom="manual" directive. and
• Error: [LWC error]: The insertBefore method is available only on elements that use the lwc:dom="manual" directive.

It is worth noting that if assign the payload directly to gridData on initialisation (and disabling the wire), the component renders correctly.

The simplified code with the issue:

<template>
    <template if:true={gridData}>
        <lightning-tree-grid columns={gridColumns} data={gridData} key-field="Key"></lightning-tree-grid>
    </template>
</template>

and

import { LightningElement, api, wire } from 'lwc';
import getBOMItemsTree from '@salesforce/apex/r3ProductTakeOffController.getBOMItemsTree';

export default class Takeoff extends LightningElement {
    gridData;
    @api recordId;
    gridColumns = [
        {
            type: "url",
            fieldName: "ProductUrl",
            label: "Product Name",
            initialWidth: 500,
            typeAttributes: { label: { fieldName: "ProductName" } }
        },
        {
            type: "text",
            fieldName: "BorisCode",
            label: "BORIS Code",
            initialWidth: 100,
            cellAttributes: { alignment: "left" }
        },
        {
            type: "number",
            fieldName: "EstQty",
            label: "Quantity",
            initialWidth: 100,
            cellAttributes: { alignment: "left" }
        },
        {
            type: "number",
            fieldName: "OrderQuantity",
            label: "Requested",
            initialWidth: 100,
            cellAttributes: { alignment: "left" }
        },
        {
            type: "text",
            fieldName: "LeadTime",
            label: "Lead Time",
            initialWidth: 100,
            cellAttributes: { alignment: "left" }
        }
    ];

    @wire(getBOMItemsTree, { projectId: '$recordId' })
    wireTreeData({ error, data }) {
        if (data) {
            var tempjson = JSON.parse(JSON.stringify(data).split('items').join('_children'));
            tempjson = JSON.parse(JSON.stringify(tempjson).replace(/\\"_children\\"\s*:\s*null,/g, ""));
            this.gridData = tempjson;
            console.log(this.gridData);
        } else if (error) {
            if (Array.isArray(error.body))
                console.log('Error is ' + error.body.map(e => e.message).join(', '));
            else if (typeof error.body.message === 'string')
                console.log('Error is ' + error.body.message);
        }
    }
}

The error seems to be caused by the standard component, I'm interested if anyone has experienced this, and or can suggests a solution?

Answer 1

Okay, I was being a numpty! The console errors are a red herring, and can be ignored. The issue was that I forgot to parse the assignment to GridData. All good now.