Server Error

[sinhaniik]

I got this error when i am trying to use the react-split

import React from 'react';
import Split from "react-split"
import ProblemStatement from "@/components/problemStatement/problemStatement";

type Props = {};
const Workspace = (props: Props) => {
    return (
        <Split className="split">
            <ProblemStatement/>
            <div>editor</div>
        </Split>
    );
};

export default Workspace

when i run npm run dev an error poped up

Server Error TypeError: Object prototype may only be an Object or null: undefined This error happened while generating the page. Any console logs will be displayed in the terminal window.

i did everything which i can like re-install the package , dubugging but i failed to fix this error

here is my package.json

{
  "name": "leetcode-cl",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.4.9",
    "@types/react": "18.2.20",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
    "firebase": "^10.3.0",
    "next": "13.4.13",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-firebase-hooks": "^5.1.1",
    "react-icons": "^4.10.1",
    "react-split": "^2.0.14",
    "react-toastify": "^9.1.3",
    "react-youtube": "^10.1.0",
    "recoil": "^0.7.7",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6"
  }
}

[menewman]

I ran into the same error message, also trying to use react-split within a Next 13 app with the app directory (i.e., with Next's implementation of React Server Components).

The resolution for me was simply to make sure this component is only used from within Client Components (i.e., components with 'use client'; at the top of the file)

In the future, perhaps it could be fixed within the library itself, by either addressing whatever issue leads to this error when using the module within a server context, or by adding a 'use client'; directive within the library itself for better Next compatibility. But the workaround is fairly straightforward (and a common one for anyone using Next 13 with external dependencies anyhow)

[sinhaniik]

yeah, that works for me