caplin / FlexLayout

Docking Layout Manager for React
MIT License
919 stars 173 forks source link

NextJS Server component not supported due to ErrorBoundary being a class component #440

Open vincent-lecrubier-skydio opened 6 months ago

vincent-lecrubier-skydio commented 6 months ago

Describe the bug

When using Layout in a server component, I get a NextJS error:

Server Error
Error: Class extends value undefined is not a constructor or null

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
(rsc)/node_modules/flexlayout-react/lib/view/ErrorBoundary.js (7:0)
(rsc)/./node_modules/flexlayout-react/lib/view/ErrorBoundary.js

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

  1. npx create-next-app@latest
  2. npm install flexlayout-react
  3. Use the following code in app/page.tsx
  4. npm run dev

Code:

import { Layout, Model } from 'flexlayout-react';

var json = {
  global: {},
  borders: [],
  layout: {
    type: "row",
    weight: 100,
    children: [
      {
        type: "tabset",
        weight: 50,
        children: [
          {
            type: "tab",
            name: "One",
            component: "button",
          }
        ]
      },
      {
        type: "tabset",
        weight: 50,
        children: [
          {
            type: "tab",
            name: "Two",
            component: "button",
          }
        ]
      }
    ]
  }
};

const model = Model.fromJson(json);

const factory = (node) => {
  var component = node.getComponent();

  if (component === "button") {
    return <button>{node.getName()}</button>;
  }
}

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Layout
        model={model}
        factory={factory} />
    </main>
  );
}

Expected behavior

It does not crash

Operating System

Browser Type?

Browser Version

Screenshots or Videos

Screenshot 2024-03-10 at 8 50 30 PM

Additional context

No response