Cell Renderer a custom componenent, keeps getting "Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'."

Question

When I try to render custom element using cell render,

here is my component: Action.jsx

import React from 'react';

export default (props) => (
    <div>
        <button
            class="action-button cancel">
            cancel
        </button>
    </div>
);

here are my grid options and import:

import AcRenderer from './Action.jsx'
...
const gridOptions = {
    rowData: renderdata(),
    columnDefs: [
      {
        headerName: "action",
        cellRenderer: AcRenderer,
        editable: false,
        colId: "action",
        filter: false,
        minWidth: 220
      }
    ],

but I keep getting this error:

"Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'."

Does anyone know why?

with many thanks!!

Answer 1

problem solved.

I have no idea somehow i was reading 27.0.0 version of document but actually using 26.2. In this version, it support you write a functional component and use is directly.(when I test, there is a new release 27.0.1 in 6 mins ago, but after test, there are issues logged on console, so decided to use back to 26.2)

But in 26.2 version, you have to export in string or import it using frameworkComponents inside the ag grid options, after that you can use you component.

To be honest, can we have some warning like: you are reading which version of document? I saw 27.0.0 was released on 08 Feb but the project started several days early than that, during these days I didn't even notice that there is a huge version release...

sorry about my complaint (this issue really wasted a lot of time) but hope my findings can help!