TypeError: Cannot read properties of null (reading 'parentNode') on REACT

JuanchiBM

Im going to use the google translater because im spanish, sorry for my bad english:

Hello, this error occurred to me when I tried to import a JSON that contained the Spanish language for the datatable in REACT, before this, datatable was working fine, I don't understand what the error is, I read somewhere that it can be solved by changing the ID of the table, since the '_' in the ids generate this error, if someone knows what to do, it would help me a lot

"use client"
import React from 'react'
import dynamic from "next/dynamic";
import DataTable from 'datatables.net-react';
import DT from 'datatables.net-dt';
import '../../styles/dataTables.css'

DataTable.use(DT);

const Chart = dynamic(
  () => import("@/pages/verIngreso/chart/chart").then((mod) => mod.ChartIngresos),
  {
    ssr: false,
  }
);

const VerIngreso = () => {
  const [tableData, setTableData] = React.useState([
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],
    ['Tiger Nixon', 'System Architect'],
    ['Garrett Winters', 'Accountant'],

    // ...
  ]);

  return (
    <>
      <h1 className='text-4xl'>Ingresos</h1>
      <Chart />
      <div></div>
      <DataTable data={tableData} className='display' options={{
        destroy: true,
        language: {
          url: '/dataTableLanguaje.json',
        },
         
      }} >
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
          </tr>
        </thead>
      </DataTable>
    </>
  )
}

export default VerIngreso

allan

Happy to take a look at a test case showing the issue. Please use Stackbltiz or similar to show the test case.

Allan