Facing issue while running in nextjs application

[Xk0nSid]

I have setup the example sheet in one page in my next.js application and I'm getting the following error:

TypeError: document.getElementsByTagName is not a function

Code Example Used:

import React from "react";
import Spreadsheet from "react-spreadsheet";

const data = [
  [{ value: "Vanilla" }, { value: "Chocolate" }],
  [{ value: "Strawberry" }, { value: "Cookies" }],
];

const MyComponent = () => <Spreadsheet data={data} />;

Node Version: v14.16.1 React Version: 17.0.1 Nextjs Version: 10.0.6

[belforto]

Try like this "next": "12.1.0",

"react": "17.0.2",

"react-spreadsheet": "^0.6.2",

import React, { useEffect ,useState} from "react";
import Spreadsheet from "react-spreadsheet";

const Luckysheet: any = () => {
  

  const [data, setData] = useState<any>([
      [{ value: "Vanilla" }, { value: "Chocolate" }, { value: "Chocolate" }],
      [{ value: "Strawberry" }, { value: "Cookies" }],
    ]);
    console.log('data: ', data)
      return <Spreadsheet data={data} onChange={setData} />;
};

export default Luckysheet;

[iddan]

@Xk0nSid @belforto Are you able to provide the full error stack trace? It will help me understand what is causing the issue

[shreyas0924]

It is working in Next.js 13 app router.

"use client"
import Spreadsheet from 'react-spreadsheet'

const Sheet = () => {
  const data = [
    [{ value: 'Vanilla' }, { value: 'Chocolate' }],
    [{ value: 'Strawberry' }, { value: 'Cookies' }],
  ]
  return <Spreadsheet data={data} />
}

export default Sheet